/* ==========================================================================
   Ruínas de Adamar — folha de estilo
   Portal de jogo anos 2000 em chave low dark fantasy: pedra, cinza, ouro velho
   e sangue seco. Sem frameworks, sem imagens externas.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* paleta canônica */
  --carvao: #0e0d0c;
  --pedra: #1c1a17;
  --osso: #d9ccb0;
  --ouro: #a8884a;
  --sangue: #6e1f1a;
  --brasa: #c2562b;

  /* derivados */
  --pedra-alta: #2a2622;
  --pedra-baixa: #161412;
  --osso-claro: #efe4c8;
  --osso-fosco: #a99d86;
  --ouro-claro: #c9ab6b;
  --ouro-escuro: #6f5a30;
  --ouro-linha: rgba(168, 136, 74, 0.35);
  --ouro-fio: rgba(168, 136, 74, 0.18);
  --sangue-vivo: #86271f;

  /* pergaminho das crônicas */
  --pergaminho: #c9bb98;
  --pergaminho-escuro: #a8966e;
  --tinta: #231b12;

  /* tipografia */
  --f-logo: 'Cinzel Decorative', 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-titulo: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --f-corpo: 'IM Fell English', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  /* medidas */
  --largura-texto: 46rem;
  --largura-site: 74rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ruído SVG (feTurbulence) usado como textura de fundo */
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .8 0 0 0 0 .69 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* cantoneiras de ouro (uma por canto) */
  --canto-te: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23a8884a'%3E%3Cpath d='M1.5 31V1.5H31' stroke-width='1.5'/%3E%3Cpath d='M5.5 24V5.5H24' stroke-opacity='.55'/%3E%3C/g%3E%3Cpath d='M1 1h7v2.5H3.5V8H1z' fill='%23c9ab6b'/%3E%3Cpath d='M11 5.5l2.5-2.5 2.5 2.5-2.5 2.5z' fill='%236e1f1a' stroke='%23a8884a' stroke-width='.8'/%3E%3C/svg%3E");
  --canto-td: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(90 16 16)'%3E%3Cg fill='none' stroke='%23a8884a'%3E%3Cpath d='M1.5 31V1.5H31' stroke-width='1.5'/%3E%3Cpath d='M5.5 24V5.5H24' stroke-opacity='.55'/%3E%3C/g%3E%3Cpath d='M1 1h7v2.5H3.5V8H1z' fill='%23c9ab6b'/%3E%3Cpath d='M11 5.5l2.5-2.5 2.5 2.5-2.5 2.5z' fill='%236e1f1a' stroke='%23a8884a' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");
  --canto-bd: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(180 16 16)'%3E%3Cg fill='none' stroke='%23a8884a'%3E%3Cpath d='M1.5 31V1.5H31' stroke-width='1.5'/%3E%3Cpath d='M5.5 24V5.5H24' stroke-opacity='.55'/%3E%3C/g%3E%3Cpath d='M1 1h7v2.5H3.5V8H1z' fill='%23c9ab6b'/%3E%3Cpath d='M11 5.5l2.5-2.5 2.5 2.5-2.5 2.5z' fill='%236e1f1a' stroke='%23a8884a' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");
  --canto-be: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg transform='rotate(270 16 16)'%3E%3Cg fill='none' stroke='%23a8884a'%3E%3Cpath d='M1.5 31V1.5H31' stroke-width='1.5'/%3E%3Cpath d='M5.5 24V5.5H24' stroke-opacity='.55'/%3E%3C/g%3E%3Cpath d='M1 1h7v2.5H3.5V8H1z' fill='%23c9ab6b'/%3E%3Cpath d='M11 5.5l2.5-2.5 2.5 2.5-2.5 2.5z' fill='%236e1f1a' stroke='%23a8884a' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");

  /* joia de sangue seco entre fios de ouro (divisores e brasões) */
  --joia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M20 1.5l8.5 8.5-8.5 8.5-8.5-8.5z' fill='%231c1a17' stroke='%23a8884a' stroke-width='1.2'/%3E%3Cpath d='M20 6l4 4-4 4-4-4z' fill='%236e1f1a'/%3E%3Cpath d='M2 10h7M31 10h7' stroke='%23a8884a' stroke-width='1.2'/%3E%3Ccircle cx='5' cy='10' r='1.6' fill='%23a8884a'/%3E%3Ccircle cx='35' cy='10' r='1.6' fill='%23a8884a'/%3E%3C/svg%3E");
  --losango: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l7 7-7 7-7-7z' fill='%231c1a17' stroke='%23a8884a' stroke-width='1.2'/%3E%3Cpath d='M8 5l3 3-3 3-3-3z' fill='%236e1f1a'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: var(--carvao);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--osso);
  font-family: var(--f-corpo);
  font-size: 1.15rem;
  line-height: 1.7;
  background: transparent;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
/* fundo: carvão com luz fraca no centro e ruído — camada fixa atrás de tudo */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--ruido),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(110, 31, 26, 0.16), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 40%, #1a1815 0%, var(--carvao) 70%);
}

body > main { flex: 1 0 auto; }

img, svg { max-width: 100%; height: auto; }

::selection { background: var(--sangue); color: var(--osso-claro); }

a {
  color: var(--ouro-claro);
  text-decoration: underline;
  text-decoration-color: rgba(201, 171, 107, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s, text-decoration-color 0.15s;
}
a:hover { color: var(--osso-claro); text-decoration-color: var(--brasa); }

:focus-visible {
  outline: 2px solid var(--ouro-claro);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 600;
  line-height: 1.2;
  color: var(--osso-claro);
  margin: 2rem 0 0.75rem;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 700; letter-spacing: 0.02em; }
h2 { font-size: clamp(1.4rem, 2.8vw, 1.75rem); color: var(--ouro-claro); letter-spacing: 0.03em; }
h3 { font-size: 1.2rem; letter-spacing: 0.02em; }
h4 { font-size: 1.05rem; color: var(--osso); }

p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.1em; }
li { margin-bottom: 0.35em; }
li::marker { color: var(--ouro); }
strong, b { color: var(--osso-claro); font-weight: 700; }
em, i { font-style: italic; }
blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 1px solid var(--ouro);
  font-style: italic;
  color: var(--osso-fosco);
}
hr {
  border: 0;
  height: 1px;
  margin: 2.5rem 0;
  background: linear-gradient(90deg, transparent, var(--ouro-linha), transparent);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--pedra);
  border: 1px solid var(--ouro);
  color: var(--osso-claro);
  font-family: var(--f-titulo);
  font-size: 0.9rem;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Cabeçalho: faixa do logo ---------- */
.site-header { position: relative; z-index: 20; }

.banner {
  position: relative;
  padding: clamp(2rem, 5vw, 3.4rem) 1rem clamp(1.4rem, 3.5vw, 2.2rem);
  text-align: center;
  background:
    radial-gradient(ellipse 45% 70% at 50% 55%, rgba(110, 31, 26, 0.28), transparent 70%),
    linear-gradient(180deg, #0a0908 0%, #13110f 60%, #1a1815 100%);
  overflow: hidden;
}
/* vinheta e textura da faixa */
.banner::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--ruido);
  box-shadow: inset 0 0 120px 30px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.logo {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  text-decoration: none;
}
.logo:hover { text-decoration: none; }

.logo-title {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, 2.5vw, 1.4rem);
  font-family: var(--f-logo);
  font-weight: 700;
  font-size: clamp(1.9rem, 6.4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: 0.03em;
  color: var(--osso);
  /* entalhe: osso no topo, ouro velho escurecendo na base */
  background: linear-gradient(180deg, var(--osso-claro) 0%, var(--osso) 38%, var(--ouro) 70%, var(--ouro-escuro) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 22px rgba(110, 31, 26, 0.55));
  transition: filter 0.4s var(--ease);
}
.logo:hover .logo-title {
  filter:
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 26px rgba(194, 86, 43, 0.45));
}

/* fios de ouro com joia ladeando a legenda */
.logo-sub {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--f-titulo);
  font-size: clamp(0.72rem, 1.7vw, 0.9rem);
  letter-spacing: 0.24em;
  color: var(--osso-fosco);
}
.logo-sub::before,
.logo-sub::after {
  content: '';
  width: clamp(1.5rem, 8vw, 5rem);
  height: 10px;
  background:
    linear-gradient(90deg, transparent, var(--ouro)) left center / calc(100% - 12px) 1px no-repeat,
    var(--losango) right center / 10px 10px no-repeat;
}
.logo-sub::after { transform: scaleX(-1); }

/* ---------- 4. Barra de pedra ---------- */
.site-nav {
  position: relative;
  background: linear-gradient(180deg, var(--pedra-alta) 0%, #201d1a 45%, var(--pedra-baixa) 100%);
  border-top: 1px solid var(--ouro);
  border-bottom: 1px solid var(--ouro);
  box-shadow:
    inset 0 1px 0 rgba(239, 228, 200, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1px 0 #000,
    0 10px 24px rgba(0, 0, 0, 0.55);
}
.site-nav::before {
  /* textura de pedra sobre o gradiente */
  content: '';
  position: absolute; inset: 0;
  background: var(--ruido);
  opacity: 0.8;
  pointer-events: none;
}

.nav-inner {
  position: relative;
  max-width: var(--largura-site);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
}
.nav > li { position: relative; margin: 0; display: flex; }
/* separadores gravados entre itens */
.nav > li + li:not(.nav-cta)::before {
  content: '';
  align-self: center;
  width: 1px;
  height: 1.3rem;
  background: linear-gradient(180deg, transparent, rgba(168, 136, 74, 0.45), transparent);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.6);
}

.nav-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.95rem 1.05rem;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--osso);
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-decoration: none;
  text-shadow: 0 1px 0 #000;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
}
button.nav-top::after {
  content: '';
  width: 0.4rem; height: 0.4rem;
  margin-top: -0.2rem;
  border-right: 1.5px solid var(--ouro);
  border-bottom: 1.5px solid var(--ouro);
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
.nav-top:hover,
.has-sub.open > .nav-top {
  color: var(--osso-claro);
  background: linear-gradient(180deg, rgba(168, 136, 74, 0.06), rgba(168, 136, 74, 0.13));
  text-decoration: none;
}
.nav-top:focus-visible { outline-offset: -3px; }
.nav-top.is-active {
  color: var(--ouro-claro);
  box-shadow: inset 0 -2px 0 var(--sangue-vivo);
}

/* painel do submenu */
.sub {
  list-style: none;
  margin: 0;
  padding: 0.45rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15.5rem;
  z-index: 30;
  background:
    var(--ruido),
    linear-gradient(180deg, #221f1b 0%, var(--pedra-baixa) 100%);
  border: 1px solid var(--ouro);
  box-shadow:
    inset 0 0 0 3px var(--pedra-baixa),
    inset 0 0 0 4px var(--ouro-fio),
    0 18px 36px rgba(0, 0, 0, 0.75);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0s linear 0.18s;
}
.sub li { margin: 0; }
.sub a {
  display: block;
  padding: 0.5rem 1.2rem 0.5rem 1.15rem;
  border-left: 2px solid transparent;
  color: var(--osso);
  font-family: var(--f-corpo);
  font-size: 1.08rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.12s, background-color 0.12s, border-color 0.12s;
}
.sub a:hover,
.sub a:focus-visible {
  color: var(--osso-claro);
  background: rgba(168, 136, 74, 0.1);
  border-left-color: var(--sangue-vivo);
}
.sub a:focus-visible { outline-offset: -3px; }
.sub a.is-active {
  color: var(--ouro-claro);
  border-left-color: var(--ouro);
}

/* revelação (somente desktop; no mobile vira acordeão) */
@media (min-width: 861px) {
  .has-sub:focus-within > .sub,
  .has-sub.open > .sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .has-sub.open > .nav-top::after { transform: rotate(225deg); margin-top: 0.2rem; }
}
@media (min-width: 861px) and (hover: hover) {
  .has-sub:hover > .sub {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}
/* Escape / clique de fechar: esconde mesmo com foco ou ponteiro dentro */
.has-sub.is-suppressed > .sub,
.has-sub.is-suppressed:hover > .sub,
.has-sub.is-suppressed:focus-within > .sub {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
}

.nav > .nav-cta {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  padding-left: 1rem;
}
.nav > .nav-cta .btn { padding: 0.5rem 1.1rem; font-size: 0.85rem; }

.site-nav .nav-toggle,
.site-nav .nav-cta-mobile { display: none; }

/* ---------- 5. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--ouro);
  border-radius: 1px;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.2s, color 0.15s, border-color 0.15s;
}
.btn:hover { text-decoration: none; }
.btn .glyph {
  font-family: 'Segoe UI Symbol', 'DejaVu Sans', 'Noto Sans Symbols', sans-serif;
  font-variant-emoji: text;
  font-weight: 400;
  font-size: 1.05em;
  line-height: 1;
}

.btn-primary {
  color: var(--osso-claro);
  background: linear-gradient(180deg, #82271f 0%, var(--sangue) 55%, #4f1512 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 170, 0.18),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 2px 0 #000,
    0 0 0 rgba(194, 86, 43, 0);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff4dc;
  border-color: var(--ouro-claro);
  background: linear-gradient(180deg, #943025 0%, #7a231d 55%, #58181a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 214, 170, 0.25),
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 2px 0 #000,
    0 0 18px rgba(194, 86, 43, 0.35);
}
.btn-primary:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); }

.btn-ghost {
  color: var(--ouro-claro);
  background: rgba(14, 13, 12, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: var(--osso-claro);
  background: rgba(168, 136, 74, 0.12);
  border-color: var(--ouro-claro);
}

/* ---------- 6. Página e moldura ---------- */
.page {
  width: 100%;
  max-width: calc(var(--largura-texto) + 2rem);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 1rem clamp(3rem, 6vw, 4.5rem);
}

.scroll {
  position: relative;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem);
  background:
    var(--ruido),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(239, 228, 200, 0.04), transparent 70%),
    linear-gradient(180deg, #201d1a 0%, var(--pedra) 40%, #181613 100%);
  border: 1px solid var(--ouro);
  /* borda dupla: fio interno de ouro separado por uma faixa de pedra */
  box-shadow:
    inset 0 0 0 5px var(--pedra),
    inset 0 0 0 6px rgba(168, 136, 74, 0.55),
    inset 0 0 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px #000,
    0 24px 60px rgba(0, 0, 0, 0.65);
}
/* cantoneiras */
.scroll::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    var(--canto-te) top left / 42px 42px no-repeat,
    var(--canto-td) top right / 42px 42px no-repeat,
    var(--canto-bd) bottom right / 42px 42px no-repeat,
    var(--canto-be) bottom left / 42px 42px no-repeat;
}
/* brasão no topo da moldura */
.scroll::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 60px;
  height: 20px;
  margin-left: -30px;
  background: var(--joia) center / contain no-repeat;
  pointer-events: none;
}
.scroll > :last-child { margin-bottom: 0; }
.scroll section > h2:first-child { margin-top: 2.5rem; }

.page-head {
  text-align: center;
  margin-bottom: 2.25rem;
  padding-bottom: 1.75rem;
  background: var(--joia) center bottom / 44px 22px no-repeat;
  position: relative;
}
.page-head::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  bottom: 10px;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, var(--ouro-linha) 30%, transparent 44%, transparent 56%, var(--ouro-linha) 70%, transparent);
}
.page-head h1 {
  margin: 0.2rem 0 0.6rem;
  text-shadow: 0 1px 0 #000, 0 3px 10px rgba(0, 0, 0, 0.7);
}
.page-head .lede { margin-left: auto; margin-right: auto; }

.kicker {
  margin: 0 0 0.25rem;
  font-family: var(--f-corpo);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ouro);
  letter-spacing: 0.02em;
}
.lede {
  max-width: 36em;
  font-size: 1.28rem;
  line-height: 1.55;
  font-style: italic;
  color: var(--osso-fosco);
}

/* ---------- 7. Componentes de texto ---------- */
.ornament {
  display: block;
  height: 22px;
  margin: 2.5rem auto;
  border: 0;
  background:
    var(--joia) center / 44px 22px no-repeat,
    linear-gradient(90deg, transparent, var(--ouro-linha)) left center / calc(50% - 26px) 1px no-repeat,
    linear-gradient(90deg, var(--ouro-linha), transparent) right center / calc(50% - 26px) 1px no-repeat;
}

.callout {
  position: relative;
  margin: 2rem 0;
  padding: 1.1rem 1.35rem 1.1rem 1.5rem;
  background:
    linear-gradient(90deg, rgba(110, 31, 26, 0.2), rgba(110, 31, 26, 0.05) 70%, transparent);
  border-left: 3px solid var(--sangue-vivo);
  box-shadow: inset 0 1px 0 var(--ouro-fio), inset 0 -1px 0 var(--ouro-fio);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout h2, .callout h3, .callout h4 { font-size: 1.05rem; color: var(--ouro-claro); }

.soon {
  margin: 2rem 0;
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  font-style: italic;
  color: var(--osso-fosco);
  border: 1px dashed rgba(168, 136, 74, 0.45);
  background:
    var(--losango) center 0.9rem / 14px 14px no-repeat,
    rgba(14, 13, 12, 0.45);
}
.soon p { margin: 0.4rem 0 0; }
.soon .btn { margin-top: 1rem; font-style: normal; }

.table-wrap {
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ouro-linha);
  background: rgba(14, 13, 12, 0.35);
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.02rem;
  line-height: 1.45;
}
.table-wrap caption {
  caption-side: top;
  padding: 0.75rem 1rem;
  text-align: left;
  font-style: italic;
  color: var(--osso-fosco);
}
.table-wrap th,
.table-wrap td {
  padding: 0.6rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--ouro-fio);
}
.table-wrap thead th {
  border-top: 0;
  border-bottom: 1px solid var(--ouro);
  background: linear-gradient(180deg, var(--pedra-alta), var(--pedra-baixa));
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ouro-claro);
  white-space: nowrap;
}
.table-wrap tbody tr:nth-child(even) { background: rgba(239, 228, 200, 0.025); }
.table-wrap tbody th { font-weight: 700; color: var(--osso-claro); font-family: var(--f-corpo); }

.page-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ouro-fio);
}
.page-links a {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--ouro-claro);
}
.page-links a:hover { color: var(--osso-claro); }
.page-links a[rel~='next'],
.page-links a.next { margin-left: auto; text-align: right; }

.map-figure {
  margin: 2rem 0;
  padding: 6px;
  background: var(--pedra-baixa);
  border: 1px solid var(--ouro);
  box-shadow: inset 0 0 0 1px #000, 0 12px 30px rgba(0, 0, 0, 0.6);
}
.map-figure a { display: block; line-height: 0; }
.map-figure img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.15) saturate(0.9);
  transition: filter 0.2s;
}
.map-figure a:hover img { filter: none; }
.map-figure figcaption {
  padding: 0.7rem 0.5rem 0.3rem;
  text-align: center;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--osso-fosco);
}

.timeline {
  list-style: none;
  position: relative;
  margin: 2rem 0;
  padding: 0 0 0 2.25rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0.6rem; top: 0.5rem; bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ouro) 4%, var(--ouro) 96%, transparent);
}
.timeline > li {
  position: relative;
  margin: 0 0 2rem;
}
.timeline > li::before {
  content: '';
  position: absolute;
  left: -2.25rem;
  top: 0.2rem;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--losango) center / contain no-repeat;
}
.timeline .date {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--ouro);
}
.timeline h3 { margin: 0.15rem 0 0.4rem; }
.timeline p:last-child { margin-bottom: 0; }

.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--sangue-vivo);
  background: rgba(110, 31, 26, 0.3);
  font-family: var(--f-titulo);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--osso);
  vertical-align: middle;
}

/* ---------- 8. Home: hero, faixas, cartões ---------- */
.hero {
  position: relative;
  width: 100%;
  max-width: var(--largura-site);
  margin: 0 auto;
  padding: clamp(3rem, 9vw, 6rem) 1rem clamp(3rem, 8vw, 5rem);
  text-align: center;
  isolation: isolate;
}
.hero::before {
  /* brasa distante atrás do texto */
  content: '';
  position: absolute;
  left: 50%; top: 45%;
  width: min(46rem, 100%);
  height: 60%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(110, 31, 26, 0.22), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero .kicker { font-size: 1.1rem; }
.hero h1 {
  margin: 0.4rem 0 1.4rem;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ouro-claro);
}
.hero h1::after {
  content: '';
  display: block;
  height: 22px;
  margin: 1rem auto 0;
  max-width: 18rem;
  background:
    var(--joia) center / 44px 22px no-repeat,
    linear-gradient(90deg, transparent, var(--ouro-linha)) left center / calc(50% - 26px) 1px no-repeat,
    linear-gradient(90deg, var(--ouro-linha), transparent) right center / calc(50% - 26px) 1px no-repeat;
}
.hero .lede {
  max-width: 22em;
  margin: 0 auto 1.25rem;
  font-size: clamp(1.7rem, 4.6vw, 2.8rem);
  line-height: 1.2;
  color: var(--osso-claro);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
  text-wrap: balance;
}
.hero p { max-width: 36em; margin-left: auto; margin-right: auto; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem 1.1rem;
  margin-top: 2rem;
}

.band {
  width: 100%;
  max-width: var(--largura-site);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1rem;
  position: relative;
}
.band + .band {
  background: var(--joia) center top / 44px 22px no-repeat;
}
.band + .band::before {
  content: '';
  position: absolute;
  top: 10px; left: 1rem; right: 1rem;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, var(--ouro-linha) 35%, transparent 47%, transparent 53%, var(--ouro-linha) 65%, transparent);
}
.band > h2 { text-align: center; margin-top: 0.5rem; }
.band > p,
.band > .lede { max-width: var(--largura-texto); margin-left: auto; margin-right: auto; }
.band > .lede { text-align: center; }
.band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: 1.5rem; }
.band > .kicker { text-align: center; margin-bottom: 0; }
.band > .band-intro { text-align: center; max-width: 38em; }
/* grade de três colunas (seis cartões fecham em 3 + 3) */
.card-grid.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
}
/* "Ler mais" sempre no pé do cartão */
.card-grid .card { display: flex; flex-direction: column; }
.card-grid .card .card-more { margin-top: auto; padding-top: 0.6rem; }

/* faixa em duas colunas: texto + mapa */
.band-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.band-split-text > h2 { margin-top: 0.5rem; }
.band-split-text .band-actions { justify-content: flex-start; }
.band-split-map { margin: 0; }
.band-split-map img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40%;
  /* o mapa original é claro: envelhecido para combinar com a pedra */
  filter: sepia(0.6) saturate(0.65) brightness(0.78) contrast(1.05);
}

.band.cta-final {
  width: calc(100% - 2rem); /* respiro lateral no celular */
  max-width: 52rem;
  margin: 1rem auto clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2.5rem, 6vw, 3.5rem) 1.5rem;
  text-align: center;
  background:
    var(--ruido),
    radial-gradient(ellipse 70% 80% at 50% 100%, rgba(110, 31, 26, 0.35), transparent 70%),
    linear-gradient(180deg, #1f1c19, var(--pedra-baixa));
  border: 1px solid var(--ouro);
  box-shadow:
    inset 0 0 0 5px var(--pedra-baixa),
    inset 0 0 0 6px rgba(168, 136, 74, 0.5),
    0 20px 50px rgba(0, 0, 0, 0.6);
}
.band.cta-final::before { display: none; }
.band.cta-final h2 { margin-top: 0; font-size: clamp(1.6rem, 4vw, 2.3rem); color: var(--osso-claro); }
.band.cta-final .btn { margin-top: 0.75rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.card-grid > li { margin: 0; display: flex; }
.card-grid > li > .card { flex: 1; }

.card,
.era-card {
  position: relative;
  display: block;
  padding: 1.5rem 1.4rem 1.35rem;
  color: var(--osso);
  text-decoration: none;
  background:
    var(--canto-te) top left / 16px 16px no-repeat,
    var(--canto-bd) bottom right / 16px 16px no-repeat,
    linear-gradient(180deg, #211e1a 0%, var(--pedra) 60%, var(--pedra-baixa) 100%);
  border: 1px solid var(--ouro-linha);
  box-shadow: inset 0 1px 0 rgba(239, 228, 200, 0.05), 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: border-color 0.18s, background-color 0.18s, box-shadow 0.2s;
}
.card h3,
.era-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  color: var(--ouro-claro);
}
.card p,
.era-card p { font-size: 1.05rem; line-height: 1.55; }
.card > :last-child,
.era-card > :last-child { margin-bottom: 0; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a::after { content: ''; position: absolute; inset: 0; } /* cartão inteiro clicável */

a.card:hover,
.card:has(h3 a:hover),
.card:focus-visible,
.card:focus-within {
  border-color: var(--ouro);
  box-shadow:
    inset 0 1px 0 rgba(239, 228, 200, 0.07),
    inset 0 0 40px rgba(110, 31, 26, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.55);
  color: var(--osso);
  text-decoration: none;
}
a.card:hover h3,
.card:has(h3 a:hover) h3 { color: var(--osso-claro); }
.card .card-more {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--f-titulo);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ouro);
}

.era-card {
  text-align: center;
  padding-top: 2rem;
  border-top: 3px solid var(--pedra-alta);
}
.era-card h3 { font-size: 1.3rem; }
.era-card .badge { margin-bottom: 0.75rem; }
.era-card.is-default {
  border-color: var(--ouro);
  border-top-color: var(--sangue-vivo);
  box-shadow:
    inset 0 0 50px rgba(110, 31, 26, 0.2),
    0 12px 28px rgba(0, 0, 0, 0.55);
}

/* ---------- 9. Crônicas: pergaminho ---------- */
.scroll.chronicle {
  color: var(--tinta);
  background:
    var(--ruido),
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(120, 90, 50, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 90%, rgba(90, 60, 30, 0.2), transparent 70%),
    linear-gradient(180deg, #cdbf9d 0%, var(--pergaminho) 50%, #bcac86 100%);
  box-shadow:
    inset 0 0 0 5px #bcad88,
    inset 0 0 0 6px rgba(111, 90, 48, 0.6),
    inset 0 0 70px rgba(70, 45, 20, 0.45),
    0 0 0 1px #000,
    0 24px 60px rgba(0, 0, 0, 0.7);
}
.scroll.chronicle h1,
.scroll.chronicle h2,
.scroll.chronicle h3,
.scroll.chronicle h4,
.scroll.chronicle strong { color: #2c1f14; text-shadow: none; }
.scroll.chronicle h2 { color: #4a1612; }
.scroll.chronicle .kicker { color: #6a4f24; }
.scroll.chronicle .lede { color: #4a3b28; }
.scroll.chronicle a:not(.btn) { color: #6e1f1a; text-decoration-color: rgba(110, 31, 26, 0.5); }
.scroll.chronicle a:not(.btn):hover { color: #2c1f14; }
.scroll.chronicle li::marker { color: #6e1f1a; }
.scroll.chronicle blockquote { color: #4a3b28; border-left-color: #6f5a30; }
.scroll.chronicle .page-head::after {
  background: linear-gradient(90deg, transparent, rgba(111, 90, 48, 0.5) 30%, transparent 44%, transparent 56%, rgba(111, 90, 48, 0.5) 70%, transparent);
}
.scroll.chronicle .page-links { border-top-color: rgba(111, 90, 48, 0.4); }
.scroll.chronicle .page-links a { color: #6e1f1a; }
.scroll.chronicle ::selection { background: #6e1f1a; color: #efe4c8; }
.scroll.chronicle .table-wrap {
  border-color: rgba(111, 90, 48, 0.5);
  background: rgba(70, 55, 30, 0.08);
}
.scroll.chronicle .table-wrap th,
.scroll.chronicle .table-wrap td { border-top-color: rgba(111, 90, 48, 0.35); color: #2c1f14; }
.scroll.chronicle .table-wrap thead th {
  background: linear-gradient(180deg, #cbb989, #b3a077);
  color: #2c1f14;
}
.scroll.chronicle .table-wrap tbody tr:nth-child(even) { background: rgba(70, 55, 30, 0.05); }
.scroll.chronicle .soon {
  color: #4a3b28;
  border-color: rgba(111, 90, 48, 0.5);
  background: rgba(70, 55, 30, 0.08);
}

/* capitular na primeira letra do texto */
.scroll.chronicle > p:first-of-type::first-letter,
.scroll.chronicle > section:first-of-type > p:first-of-type::first-letter,
.dropcap::first-letter {
  float: left;
  margin: 0.02em 0.14em 0 0.02em;
  font-family: var(--f-logo);
  font-weight: 700;
  font-size: 4em;
  line-height: 1.12;
  color: var(--sangue);
  text-shadow: 1px 1px 0 rgba(168, 136, 74, 0.6);
}

/* ---------- 10. Rodapé ---------- */
.site-footer {
  margin-top: auto;
  position: relative;
  text-align: center;
  background:
    var(--ruido),
    linear-gradient(180deg, var(--pedra-baixa), #090807);
  border-top: 1px solid var(--ouro);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.8), 0 -1px 0 #000;
}
.footer-inner {
  max-width: var(--largura-site);
  margin: 0 auto;
  padding: 2.25rem 1rem 2.75rem;
}
.site-footer .ornament { margin: 0 auto 1.25rem; max-width: 20rem; }
.footer-name {
  margin: 0;
  font-family: var(--f-logo);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, var(--osso) 20%, var(--ouro) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-credit {
  margin: 0.2rem 0 1rem;
  font-style: italic;
  color: var(--osso-fosco);
}
.footer-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 1.02rem;
}
.footer-links li { margin: 0; }

/* ---------- 11. Sem JavaScript ---------- */
.noscript {
  max-width: var(--largura-site);
  margin: 0 auto;
  padding: 1rem;
  text-align: center;
  border-top: 1px solid var(--ouro-linha);
  color: var(--osso-fosco);
  font-size: 1rem;
}
.noscript a { margin: 0 0.35rem; }

/* ---------- 12. Responsivo ---------- */
@media (max-width: 1020px) {
  .nav-top { padding-left: 0.8rem; padding-right: 0.8rem; font-size: 0.9rem; }
}

@media (max-width: 860px) {
  .nav-inner {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0.55rem 1rem;
    gap: 0.5rem;
  }

  .site-nav .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.9rem;
    background: linear-gradient(180deg, rgba(239, 228, 200, 0.05), rgba(0, 0, 0, 0.2));
    border: 1px solid var(--ouro-linha);
    border-radius: 1px;
    color: var(--osso);
    font-family: var(--f-titulo);
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.08em;
    cursor: pointer;
  }
  .nav-toggle:hover { border-color: var(--ouro); color: var(--osso-claro); }
  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after {
    display: block;
    width: 1.1rem;
    height: 1.5px;
    background: var(--ouro-claro);
    transition: transform 0.2s var(--ease), background-color 0.2s;
  }
  .nav-toggle-icon { position: relative; }
  .nav-toggle-icon::before,
  .nav-toggle-icon::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-icon::before { top: -5px; }
  .nav-toggle-icon::after { top: 5px; }
  .nav-open .nav-toggle-icon { background: transparent; }
  .nav-open .nav-toggle-icon::before { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle-icon::after { transform: translateY(-5px) rotate(-45deg); }

  .site-nav .nav-cta-mobile { display: inline-flex; padding: 0.5rem 1rem; font-size: 0.82rem; }

  .nav {
    display: none;
    flex: 0 0 calc(100% + 2rem);
    flex-direction: column;
    margin: 0.35rem -1rem -0.55rem;
    border-top: 1px solid var(--ouro-linha);
    background: rgba(9, 8, 7, 0.5);
  }
  .site-nav.nav-open .nav { display: flex; }
  .nav > li { flex-direction: column; border-bottom: 1px solid rgba(168, 136, 74, 0.14); }
  .nav > li + li:not(.nav-cta)::before { display: none; }
  .nav-top {
    width: 100%;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    font-size: 0.98rem;
    text-align: left;
  }
  .nav-top.is-active { box-shadow: inset 3px 0 0 var(--sangue-vivo); }
  .has-sub.open > .nav-top::after { transform: rotate(225deg); margin-top: 0.2rem; }

  .sub,
  .has-sub.is-suppressed > .sub {
    position: static;
    display: none;
    min-width: 0;
    padding: 0.2rem 0 0.6rem;
    visibility: visible;
    opacity: 1;
    transform: none;
    border: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.25);
    transition: none;
  }
  .has-sub.open > .sub { display: block; }
  .sub a { padding: 0.55rem 1.25rem 0.55rem 2rem; }

  .nav > .nav-cta { display: none; }

  .band-split { grid-template-columns: minmax(0, 1fr); }
  .band-split-map { max-width: 26rem; width: 100%; margin: 0 auto; }
}

@media (max-width: 520px) {
  body { font-size: 1.1rem; }
  .logo-sub { letter-spacing: 0.14em; gap: 0.6rem; }
  .scroll::after { width: 48px; margin-left: -24px; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ---------- 13. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- 14. Formulário "Quero jogar" ---------- */
.page-wide { max-width: calc(58rem + 2rem); }

.form-intro { font-size: 1.1rem; }

.wizard-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 1.75rem 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}
.wizard-progress li {
  flex: 1 1 6.5rem;
  padding: 0.55rem 0.5rem 0.5rem;
  font-family: var(--f-titulo);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--osso-fosco);
  background: rgba(14, 13, 12, 0.45);
  border: 1px solid var(--ouro-fio);
  border-top: 3px solid var(--pedra-alta);
  counter-increment: etapa;
}
.wizard-progress li::before { content: counter(etapa) '. '; color: var(--ouro-escuro); }
.wizard-progress li.is-done { color: var(--osso); border-top-color: var(--ouro-escuro); }
.wizard-progress li.is-current {
  color: var(--osso-claro);
  border-color: var(--ouro-linha);
  border-top-color: var(--sangue-vivo);
  background: linear-gradient(180deg, rgba(110, 31, 26, 0.25), rgba(14, 13, 12, 0.45));
}
.wizard-progress li.is-current::before { color: var(--ouro-claro); }

.wizard { margin: 0; }
.step {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-width: 0;
}
.wizard.is-wizard .step { display: none; }
.wizard.is-wizard .step.is-current { display: block; }
.step legend {
  display: block;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0;
  font-family: var(--f-titulo);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  font-weight: 600;
  color: var(--ouro-claro);
}
.step legend:focus { outline: none; }

.field-hint { margin: 0.25rem 0 1rem; font-style: italic; color: var(--osso-fosco); }
.question { margin: 1.75rem 0 0; }
.question-title {
  margin: 1.5rem 0 0.5rem;
  font-family: var(--f-titulo);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--osso-claro);
}
.origin-group .question-title { margin-top: 1.25rem; }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
}
.choice-grid-compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }

.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1rem 0.95rem 2.6rem;
  cursor: pointer;
  background:
    linear-gradient(180deg, #211e1a 0%, var(--pedra) 60%, var(--pedra-baixa) 100%);
  border: 1px solid var(--ouro-fio);
  box-shadow: inset 0 1px 0 rgba(239, 228, 200, 0.04), 0 6px 14px rgba(0, 0, 0, 0.35);
  transition: border-color 0.15s, box-shadow 0.2s, background-color 0.15s;
}
.choice[hidden] { display: none; }
.choice:hover { border-color: var(--ouro-linha); }
.choice input {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--sangue-vivo);
}
.choice-title {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--ouro-claro);
}
.choice-tag {
  align-self: flex-start;
  padding: 0.1rem 0.45rem;
  font-family: var(--f-titulo);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--osso-claro);
  background: var(--sangue);
  border: 1px solid var(--ouro-escuro);
}
.choice-text { font-size: 1rem; line-height: 1.45; color: var(--osso); }
.choice:has(input:checked) {
  border-color: var(--ouro);
  background:
    linear-gradient(180deg, rgba(110, 31, 26, 0.3), rgba(28, 26, 23, 0.95) 70%);
  box-shadow: inset 0 0 30px rgba(110, 31, 26, 0.25), 0 8px 18px rgba(0, 0, 0, 0.45);
}
.choice:has(input:checked) .choice-title { color: var(--osso-claro); }
.choice:has(input:focus-visible) { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }

.field { margin: 1.25rem 0 0; }
.field[hidden] { display: none; }
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--f-titulo);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--osso-claro);
}
.opcional { font-family: var(--f-corpo); font-style: italic; letter-spacing: 0; color: var(--osso-fosco); }
.field input,
.field textarea,
.field select {
  display: block;
  width: 100%;
  padding: 0.65rem 0.8rem;
  font-family: var(--f-corpo);
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--osso-claro);
  background: rgba(14, 13, 12, 0.7);
  border: 1px solid var(--ouro-linha);
  border-radius: 1px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
.field textarea { resize: vertical; min-height: 4.5rem; }
.field select option { color: var(--osso-claro); background: var(--pedra); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(169, 157, 134, 0.6); font-style: italic; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ouro-claro);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(201, 171, 107, 0.25);
}
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: 1rem; }
.field-row .field { margin-top: 1.25rem; }

.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem;
  cursor: pointer;
  background: rgba(110, 31, 26, 0.12);
  border-left: 3px solid var(--sangue-vivo);
}
.check input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.3rem; accent-color: var(--sangue-vivo); }

.form-error {
  margin: 1.25rem 0 0;
  padding: 0.7rem 1rem;
  color: #f1c9b8;
  background: rgba(110, 31, 26, 0.35);
  border: 1px solid var(--sangue-vivo);
}
.form-error[hidden] { display: none; }

.resumo {
  margin: 0.5rem 0 0;
  padding: 1rem 1.1rem;
  max-height: 22rem;
  overflow: auto;
  font-family: var(--f-corpo);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--tinta);
  background: var(--pergaminho);
  border: 1px solid var(--pergaminho-escuro);
  box-shadow: inset 0 0 30px rgba(35, 27, 18, 0.25);
}
.resumo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin: 0.9rem 0 0; }
.copiado { font-style: italic; color: var(--ouro-claro); }
.btn-link {
  padding: 0;
  font-family: var(--f-corpo);
  font-size: 1rem;
  color: var(--osso-fosco);
  text-decoration: underline;
  background: none;
  border: 0;
  cursor: pointer;
}
.btn-link:hover { color: var(--osso-claro); }

.wizard-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ouro-fio);
}
.wizard-nav [hidden] { display: none; }
.wizard-nav [data-seguir],
.wizard-nav [data-enviar] { margin-left: auto; }
.wizard:not(.is-wizard) .wizard-nav [data-voltar],
.wizard:not(.is-wizard) .wizard-nav [data-seguir] { display: none; }
#enviado[hidden] { display: none; }

@media (max-width: 520px) {
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wizard-nav .btn { flex: 1 1 100%; }
  .wizard-nav [data-seguir], .wizard-nav [data-enviar] { margin-left: 0; order: -1; }
}

/* ---------- 15. Lista de perícias GURPS ---------- */
.legenda-status { list-style: none; padding: 0; margin: 1rem 0 0; }
.legenda-status li { margin: 0.4rem 0; }
.legenda-status .pericia-status, .legenda-status .pericia-esp { margin-right: 0.4rem; }

.filtros {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0 1rem;
  margin: 1.75rem 0 0;
  padding: 1rem 1.1rem 1.1rem;
  background: rgba(14, 13, 12, 0.45);
  border: 1px solid var(--ouro-fio);
}
.filtros .field { margin-top: 0; }
.filtro-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.chip {
  padding: 0.4rem 0.85rem;
  font-family: var(--f-titulo);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--osso-fosco);
  background: rgba(14, 13, 12, 0.6);
  border: 1px solid var(--ouro-fio);
  cursor: pointer;
}
.chip:hover { color: var(--osso-claro); border-color: var(--ouro-linha); }
.chip[aria-pressed="true"] {
  color: var(--osso-claro);
  border-color: var(--ouro);
  background: linear-gradient(180deg, rgba(110, 31, 26, 0.45), rgba(28, 26, 23, 0.9));
}
.chip:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }

.contagem { margin: 1.25rem 0 0.5rem; font-style: italic; color: var(--osso-fosco); }
.lista-pericias { display: grid; gap: 0.6rem; }
.pericia {
  padding: 0.85rem 1rem 0.8rem;
  background: linear-gradient(180deg, #211e1a 0%, var(--pedra) 70%);
  border: 1px solid var(--ouro-fio);
  border-left: 3px solid var(--ouro-escuro);
}
.pericia.st-narrador { border-left-color: var(--brasa); }
.pericia.st-nao { border-left-color: #4a4640; opacity: 0.8; }
.pericia-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
.pericia-nome { margin: 0; font-size: 1.05rem; color: var(--ouro-claro); }
.pericia-esp { margin-left: 0.2rem; font-family: var(--f-corpo); color: var(--brasa); }
.pericia-dif { font-family: var(--f-titulo); font-size: 0.82rem; letter-spacing: 0.05em; color: var(--osso); }
.pericia-resumo { margin: 0.35rem 0 0.45rem; font-size: 1.02rem; line-height: 1.45; }
.pericia-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; font-size: 0.9rem; color: var(--osso-fosco); }
.pericia-status {
  display: inline-block;
  padding: 0 0.45rem;
  font-family: var(--f-titulo);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.st-livre .pericia-status, .pericia-status.st-livre { color: var(--ouro-claro); }
.st-narrador .pericia-status, .pericia-status.st-narrador { color: #e08a5e; }
.st-nao .pericia-status, .pericia-status.st-nao { color: var(--osso-fosco); }
.pericia-variantes { margin: 0 0 0.45rem; padding-left: 1.1rem; font-size: 0.98rem; line-height: 1.4; }
.pericia-variantes strong { font-weight: normal; color: var(--osso-claro); }
.pericia-vazio { font-style: italic; color: var(--osso-fosco); }

@media (max-width: 520px) {
  .filtros { grid-template-columns: minmax(0, 1fr); }
  .filtros .field + .field { margin-top: 0.8rem; }
}

/* ---------- 16. Calculadora de ficha GURPS ---------- */
.grid-atributos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.calc { margin-top: 1.25rem; }
.calc-grupo { margin: 0 0 1.25rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--ouro-fio); background: rgba(14, 13, 12, 0.45); min-width: 0; }
.calc-grupo legend { padding: 0 0.4rem; font-family: var(--f-titulo); font-size: 1rem; color: var(--ouro-claro); }
.calc-grupo .field-hint { margin-top: 0; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); gap: 0.9rem 1rem; }
.calc-campo { margin: 0; }
.calc-campo label { font-size: 0.85rem; }
.calc-info { display: block; margin-top: 0.3rem; font-size: 0.9rem; font-style: italic; color: var(--osso-fosco); }
.calc-resumo { padding: 1rem 1.1rem; border: 1px solid var(--ouro-linha); border-left: 3px solid var(--sangue-vivo); background: linear-gradient(90deg, rgba(110, 31, 26, 0.18), rgba(14, 13, 12, 0.45)); }
.calc-total { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--f-titulo); color: var(--osso-fosco); }
.calc-total strong { font-size: 2rem; color: var(--ouro-claro); }
.calc-detalhe { margin: 0.35rem 0 0; }
.calc-avisos { margin: 0.6rem 0 0; padding-left: 1.2rem; color: #e08a5e; }
.calc-avisos:empty { display: none; }
.calc-pericia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.9rem 1rem; align-items: end; margin-top: 1.25rem; }
.calc-pericia .field { margin: 0; }
.calc-pericia .calc-detalhe { grid-column: 1 / -1; }
.calc-orcamento { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0 1rem; align-items: end; margin-bottom: 1.25rem; }
.calc-orcamento .field { margin: 0; }
.calc-orcamento .field[hidden] { display: none; }
.calc-orcamento .field-hint { grid-column: 1 / -1; margin: 0.5rem 0 0; }
.calc-estourou { color: #e08a5e; font-weight: 700; }
.calc-check { margin-top: 1rem; }
.table-wrap td small { color: var(--osso-fosco); font-size: 0.88em; }

/* ---------- 17. Criador de personagem (modo aplicativo) ---------- */
/* No desktop a página ocupa exatamente a janela: sem faixa do logo nem rodapé, e só as listas rolam. */
body.modo-app .banner,
body.modo-app .site-footer { display: none; }
.app { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 0; min-height: 0; }
.app-lado {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 0.9rem;
  background: linear-gradient(180deg, rgba(28, 26, 23, 0.95), rgba(14, 13, 12, 0.95));
  border-right: 1px solid var(--ouro-linha);
  min-height: 0;
  overflow: auto;
}
.app-quem { display: grid; gap: 0.15rem; }
.app-quem .kicker { margin: 0; font-size: 0.72rem; }
.app-quem strong { font-family: var(--f-titulo); font-size: 1.15rem; color: var(--osso-claro); overflow-wrap: anywhere; }
.app-pontos { padding: 0.7rem 0.8rem; border: 1px solid var(--ouro-linha); border-left: 3px solid var(--sangue-vivo); background: linear-gradient(90deg, rgba(110, 31, 26, 0.3), rgba(14, 13, 12, 0.6)); }
.app-total { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--f-titulo); color: var(--osso-fosco); }
.app-total strong { font-size: 2rem; line-height: 1; color: var(--ouro-claro); }
.app-pontos p { margin: 0.2rem 0 0.5rem; font-family: var(--f-titulo); font-size: 0.85rem; }
.app-medidores { display: grid; gap: 0.2rem; margin: 0; font-size: 0.88rem; }
.app-medidores div { display: flex; justify-content: space-between; gap: 0.5rem; }
.app-medidores dt { color: var(--osso-fosco); }
.app-medidores dd { margin: 0; color: var(--osso-claro); text-align: right; }
.ok { color: #a9c47f; }
.tem-erro { color: #e08a5e; }
.tem-aviso { color: var(--ouro-claro); }
.app-medidores dd.tem-erro, .app-pontos p.tem-erro { color: #e08a5e; font-weight: 700; }

.app-etapas { display: grid; gap: 0.2rem; }
.app-etapa-botao {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.55rem;
  font-family: var(--f-titulo);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--osso);
  background: rgba(14, 13, 12, 0.5);
  border: 1px solid var(--ouro-fio);
  border-left: 3px solid transparent;
  cursor: pointer;
}
.app-etapa-botao:hover { color: var(--osso-claro); border-color: var(--ouro-linha); }
.app-etapa-botao.is-current { color: var(--osso-claro); border-left-color: var(--sangue-vivo); background: linear-gradient(90deg, rgba(110, 31, 26, 0.4), rgba(14, 13, 12, 0.5)); }
.app-etapa-botao:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 1px; }
.app-etapa-num { color: var(--ouro-escuro); text-align: center; }
.app-etapa-marca { min-width: 1.4rem; padding: 0 0.3rem; font-size: 0.75rem; text-align: center; border-radius: 1rem; }
.app-etapa-marca.tem-erro { color: #1b0d0a; background: #e08a5e; font-weight: 700; }
.app-etapa-marca.tem-aviso { color: var(--ouro-claro); border: 1px solid var(--ouro-linha); }
.app-etapa-marca.ok { color: #a9c47f; }
.app-salvar { display: grid; gap: 0.4rem; margin-top: auto; }
.app-salvar .btn { width: 100%; }
.app-status { margin: 0; font-size: 0.92rem; font-style: italic; color: var(--osso-fosco); }
.app-status .btn-link { font-size: 0.92rem; }

.app-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
#criador { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-etapa { display: none; flex: 1; min-height: 0; flex-direction: column; }
.app-etapa.is-current { display: flex; }
.app-cab { padding: 0.9rem 1.25rem 0.6rem; border-bottom: 1px solid var(--ouro-fio); }
.app-cab h1 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--ouro-claro); }
.app-cab p { margin: 0.25rem 0 0; font-size: 1rem; color: var(--osso-fosco); }
.app-corpo { flex: 1; min-height: 0; overflow: auto; padding: 0.9rem 1.25rem 1.25rem; scrollbar-color: var(--ouro-escuro) rgba(14, 13, 12, 0.6); }
.app-form { max-width: 60rem; }
.app-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0 1.25rem; }
.app-colunas .field[hidden] { display: none; }
.app-atributos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0.9rem 1rem; }
.app-sub { margin: 1.4rem 0 0.3rem; font-size: 1.05rem; letter-spacing: 0.04em; color: var(--ouro-claro); }
.app-estreito { max-width: 22rem; }
.campo-erro { border-color: #e08a5e !important; box-shadow: 0 0 0 1px rgba(224, 138, 94, 0.5) !important; }

/* etapas com catálogo e lista: dois painéis lado a lado, cada um com rolagem própria */
.app-duplo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; overflow: hidden; padding-bottom: 0.9rem; }
.painel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: rgba(14, 13, 12, 0.45); border: 1px solid var(--ouro-fio); }
.painel-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--ouro-fio); }
.painel-cab h2 { margin: 0; font-size: 1rem; letter-spacing: 0.05em; color: var(--ouro-claro); }
.painel-conta { margin-left: auto; font-family: var(--f-titulo); font-size: 0.82rem; color: var(--osso-fosco); }
.painel-rolagem { flex: 1; min-height: 0; overflow: auto; overflow-x: hidden; padding: 0.6rem 0.75rem; scrollbar-color: var(--ouro-escuro) rgba(14, 13, 12, 0.6); }
.painel-pe { padding: 0.6rem 0.75rem; border-top: 1px solid var(--ouro-fio); margin: 0; }
.painel-filtros .criador-busca { flex: 1 1 100%; }
.painel-filtros select { flex: 1 1 8rem; min-width: 0; }
.painel-filtros select,
.criador-busca {
  padding: 0.35rem 0.5rem;
  font-family: var(--f-corpo);
  font-size: 0.95rem;
  color: var(--osso-claro);
  background: rgba(14, 13, 12, 0.8);
  border: 1px solid var(--ouro-linha);
  border-radius: 1px;
}
.painel-filtros select option { color: var(--osso-claro); background: var(--pedra); }
.painel-conta-catalogo { flex: 1 1 100%; margin: 0; font-size: 0.88rem; font-style: italic; color: var(--osso-fosco); }

.app-catalogo { margin: 0; list-style: none; padding: 0.3rem 0.4rem; }
.app-cat-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid var(--ouro-fio);
}
.app-cat-item:hover { background: rgba(168, 136, 74, 0.07); }
.app-cat-item.ja-tem { opacity: 0.55; }
.app-cat-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; }
.app-cat-topo strong { font-family: var(--f-corpo); font-size: 1.02rem; font-weight: 700; color: var(--osso-claro); }
.app-cat-resumo { margin: 0.1rem 0 0; overflow: hidden; font-size: 0.92rem; line-height: 1.3; color: var(--osso-fosco); white-space: nowrap; text-overflow: ellipsis; }
.app-cat-selo { font-family: var(--f-titulo); font-size: 0.78rem; color: var(--ouro-claro); white-space: nowrap; }
.app-adicionar {
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--osso-claro);
  background: linear-gradient(180deg, rgba(110, 31, 26, 0.55), rgba(28, 26, 23, 0.9));
  border: 1px solid var(--ouro-linha);
  cursor: pointer;
}
.app-adicionar:hover:not(:disabled) { border-color: var(--ouro); }
.app-adicionar:disabled { color: #a9c47f; background: none; cursor: default; }
.app-adicionar:focus-visible, .app-remover:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 1px; }
.pericia-status { font-size: 0.66rem; }

.criador-lista { display: grid; gap: 0.5rem; }
.app-item {
  display: grid;
  gap: 0.35rem;
  padding: 0.5rem 0.6rem;
  background: rgba(14, 13, 12, 0.55);
  border: 1px solid var(--ouro-fio);
  border-left: 3px solid var(--ouro-escuro);
  min-width: 0;
}
.app-item.st-narrador { border-left-color: var(--ouro-claro); }
.app-item.com-erro { border-left-color: #e08a5e; }
.app-item-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
.app-item-nome { font-family: var(--f-corpo); font-size: 1.02rem; color: var(--osso-claro); }
.app-item-nome-input { flex: 1 1 10rem; }
.app-item-cat { font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--osso-fosco); }
.app-item-topo .criador-custo { margin-left: auto; }
.app-item-meta { margin: 0; font-size: 0.9rem; color: var(--osso-fosco); }
.app-item-erro { margin: 0; font-size: 0.9rem; color: #e08a5e; }
.app-item-erro:empty { display: none; }
.app-item-texto { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.app-nh { font-size: 1.05rem; }
.criador-custo.devolve { color: #a9c47f; }
.app-remover {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--osso-fosco);
  background: none;
  border: 1px solid var(--ouro-fio);
  cursor: pointer;
}
.app-remover:hover { color: #e08a5e; border-color: #e08a5e; }
.criador-custo { font-family: var(--f-titulo); font-size: 0.9rem; color: var(--ouro-claro); white-space: nowrap; }
.criador-campos { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: end; }
.criador-campo { display: grid; gap: 0.15rem; flex: 1 1 8rem; min-width: 0; }
.criador-campo > span { font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--osso-fosco); }
.app-item input,
.app-item select,
.criador-inline select {
  width: 100%;
  padding: 0.3rem 0.45rem;
  font-family: var(--f-corpo);
  font-size: 0.95rem;
  color: var(--osso-claro);
  background: rgba(14, 13, 12, 0.8);
  border: 1px solid var(--ouro-linha);
  border-radius: 1px;
}
.app-item select option, .criador-inline select option { color: var(--osso-claro); background: var(--pedra); }
.app-item input:focus, .app-item select:focus, .criador-busca:focus, .painel-filtros select:focus, .criador-inline select:focus {
  outline: none;
  border-color: var(--ouro-claro);
  box-shadow: 0 0 0 2px rgba(201, 171, 107, 0.25);
}
.criador-variante { flex: 1 1 100%; margin: 0; font-size: 0.9rem; font-style: italic; color: var(--osso-fosco); }
.app-efeitos summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.88rem; color: var(--osso-fosco); cursor: pointer; }
.app-efeitos summary .efeito-tag { min-width: 0; }
.app-efeitos[hidden] { display: none; }
.app-efeitos .efeitos { margin-top: 0.35rem; font-size: 0.9rem; }
.criador-add { margin-top: 0.6rem; padding: 0.35rem 0.8rem; font-size: 0.8rem; }
.criador-add:disabled { opacity: 0.5; cursor: not-allowed; }
.criador-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.criador-inline select { flex: 1 1 10rem; width: auto; min-width: 0; max-width: 100%; }
.criador-inline .btn { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
.criador-arquivo { position: relative; cursor: pointer; }
.criador-arquivo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.criador-arquivo:focus-within { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }

/* revisão */
.app-pendencias { display: grid; gap: 0.35rem; margin: 0 0 0.8rem; padding: 0; list-style: none; }
.app-pendencias:empty { display: none; }
.app-pendencias li { margin: 0; font-size: 0.98rem; }
.app-ir {
  margin-right: 0.3rem;
  padding: 0 0.45rem;
  font-family: var(--f-titulo);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: inherit;
  background: none;
  border: 1px solid currentColor;
  cursor: pointer;
}
.app-texto { max-height: none; margin: 0; }
.painel-pe .btn { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn.is-disabled { opacity: 0.45; cursor: not-allowed; }

.app-rodape { display: flex; align-items: center; gap: 1rem; padding: 0.55rem 1.25rem; border-top: 1px solid var(--ouro-fio); background: rgba(14, 13, 12, 0.6); }
.app-rodape .btn { padding: 0.4rem 0.9rem; font-size: 0.82rem; }
.app-rodape .btn:disabled { opacity: 0.4; cursor: default; }
.app-rodape [data-seguir] { margin-left: auto; }
.app-rodape [hidden] { display: none; }
.app-rodape-status { flex: 1; margin: 0; font-size: 0.92rem; color: var(--osso-fosco); text-align: center; }
.app-rodape-status.tem-erro { color: #e08a5e; }

@media (min-width: 900px) {
  body.modo-app { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  body.modo-app .site-header { flex: none; }
  body.modo-app .app { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
}
.app-salvar-movel { display: none; }
.filtro-toggle { display: none; }
/* criador: chips de filtro, cards retráteis, marcas */
.filtros-linha { display: flex; gap: 0.5rem; flex: 1 1 100%; }
.filtros-linha .criador-busca { flex: 1 1 auto; }
.painel-filtros .filtro-ordem { flex: 0 0 auto; padding: 0.35rem 0.5rem; font-family: var(--f-corpo); font-size: 0.92rem; color: var(--osso-claro); background: rgba(14, 13, 12, 0.8); border: 1px solid var(--ouro-linha); }
.filtro-ordem option { color: var(--osso-claro); background: var(--pedra); }
.filtro-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; flex: 1 1 100%; }
.filtro-rotulo { min-width: 4.6rem; font-family: var(--f-titulo); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--osso-fosco); }
.chip-p { padding: 0.15rem 0.55rem; font-size: 0.74rem; }
.filtros-pe { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; flex: 1 1 100%; }
.filtro-narrador { gap: 0.4rem; align-items: center; margin: 0; padding: 0; font-size: 0.9rem; background: none; border: 0; }
.filtro-narrador input { margin-top: 0; }
.filtros-pe .painel-conta-catalogo { flex: 1 1 auto; }
.marca-narrador { font-size: 0.72rem; color: var(--ouro-claro); cursor: help; }
.app-cat-texto { display: grid; gap: 0.1rem; min-width: 0; padding: 0; font: inherit; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.app-cat-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; }
.app-cat-item.aberto .app-cat-resumo { white-space: normal; }
.app-cat-texto:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.app-abrir { width: 1.4rem; padding: 0; font-size: 0.8rem; color: var(--osso-fosco); background: none; border: 0; cursor: pointer; }
.app-abrir:hover { color: var(--osso-claro); }
.app-item-topo .app-item-nome { cursor: pointer; }
.app-item-escolha { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 0.9rem; font-style: italic; color: var(--osso-fosco); white-space: nowrap; text-overflow: ellipsis; }
.app-item-topo .criador-custo { margin-left: 0; }
.app-item-corpo { display: grid; gap: 0.4rem; padding: 0.2rem 0 0.1rem 1.8rem; }
.app-item-corpo[hidden] { display: none; }
.app-item-corpo .app-item-meta { font-style: italic; }
.app-item { gap: 0.2rem; padding: 0.35rem 0.55rem; }
.app-pontos-pericia { width: auto !important; margin-left: auto; padding: 0.15rem 0.35rem !important; font-size: 0.88rem !important; }
.app-item-topo .app-nh { min-width: 3.4rem; text-align: right; }
.exemplos-custo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; flex: 1 1 100%; }
.app-etapa-marca.tem-pendente { color: #1b0d0a; background: var(--ouro-claro); font-weight: 700; }
.app-etapa-marca.em-andamento { color: var(--osso-fosco); }
.app-pendencias .tem-pendente { color: var(--ouro-claro); }
.campo-falta { transition: box-shadow 0.2s; }
.mostrar-incompletos .campo-falta { border-color: var(--ouro-claro) !important; box-shadow: 0 0 0 1px rgba(201, 171, 107, 0.5) !important; }
.app-salvar { padding: 0.6rem; border: 1px solid var(--ouro-fio); background: rgba(14, 13, 12, 0.5); }

/* etiquetas dos efeitos dos traços */
.efeitos { display: grid; gap: 0.3rem; margin: 0.2rem 0 0.4rem; padding: 0; list-style: none; font-size: 0.95rem; line-height: 1.4; }
.efeitos[hidden] { display: none; }
.efeito-tag {
  display: inline-block;
  min-width: 6.2rem;
  margin-right: 0.35rem;
  padding: 0 0.4rem;
  font-family: var(--f-titulo);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  vertical-align: 0.1em;
  border: 1px solid currentColor;
}
.tag-aplicado { color: var(--ouro-claro); }
.tag-sempre { color: var(--osso); }
.tag-condicional { color: #e08a5e; background: rgba(134, 39, 31, 0.25); }
.tag-regra { color: var(--osso-fosco); }

/* ---------- 18. Meus personagens e ficha ---------- */
.personagens-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.personagem-card { display: flex; flex-direction: column; gap: 0.35rem; }
.personagem-nome { margin: 0; font-size: 1.3rem; }
.personagem-nome a { color: var(--ouro-claro); text-decoration: none; }
.personagem-nome a:hover { text-decoration: underline; }
.personagem-conceito { margin: 0; font-style: italic; }
.personagem-card .card-more { margin: 0; }
.personagem-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin-top: auto; padding-top: 0.6rem; }
.personagem-acoes .btn { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
.ficha-acoes { margin-bottom: 1.25rem; }
.personagem-selo { align-self: flex-start; padding: 0 0.5rem; font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid currentColor; }
.personagem-selo.pronta { color: #a9c47f; }
.personagem-selo.rascunho { color: #e08a5e; }
.ficha-pontos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; padding: 0.7rem 1rem; font-family: var(--f-titulo); color: var(--osso-fosco); border: 1px solid var(--ouro-linha); border-left: 3px solid var(--sangue-vivo); background: linear-gradient(90deg, rgba(110, 31, 26, 0.3), rgba(14, 13, 12, 0.45)); }
.ficha-pontos strong { font-size: 1.8rem; color: var(--ouro-claro); }
.ficha-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.ficha-bloco { padding: 0.9rem 1rem; background: rgba(14, 13, 12, 0.45); border: 1px solid var(--ouro-fio); min-width: 0; }
.ficha-largo { margin-top: 1rem; }
.scroll .ficha-bloco > .ficha-titulo { margin-top: 0; }
.ficha-valores dd { font-size: 1rem; }
.ficha-titulo { margin: 0 0 0.6rem; font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ouro-claro); }
.ficha-valores { display: grid; gap: 0.25rem; margin: 0; }
.ficha-valores > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: baseline; padding: 0.15rem 0; border-bottom: 1px solid var(--ouro-fio); }
.ficha-valores dt { font-family: var(--f-titulo); font-size: 0.85rem; color: var(--osso-fosco); }
.ficha-valores dd { margin: 0; text-align: right; color: var(--osso-claro); }
.ficha-valores .ficha-custo { min-width: 2.5rem; font-size: 0.85rem; color: var(--osso-fosco); }
.ficha-traco { padding: 0.5rem 0; border-top: 1px solid var(--ouro-fio); }
.ficha-traco:first-of-type { border-top: 0; }
.ficha-traco .pericia-resumo { margin: 0.2rem 0 0; }
.ficha .table-wrap .efeitos { margin: 0.25rem 0 0; font-size: 0.88rem; }

@media print {
  .site-header, .site-nav, .site-footer, .ficha-acoes, .skip-link, .noscript { display: none !important; }
  body, .scroll, .page { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .scroll::before, .scroll::after { display: none !important; }
  .ficha-bloco, .ficha-pontos { background: none !important; border-color: #999 !important; break-inside: avoid; }
  .ficha *, .page-head * { color: #000 !important; }
  .efeito-tag { border-color: #000 !important; }
}

/* ---------- 19. Arte: pinturas em domínio público (créditos em creditos.html) ---------- */
/* Cabeçalho: a pintura da seção, escurecida para o logo continuar legível. */
.banner {
  padding: clamp(3rem, 8vw, 5.5rem) 1rem clamp(2.2rem, 5vw, 3.4rem);
  background:
    linear-gradient(180deg, rgba(8, 7, 6, 0.3) 0%, rgba(14, 13, 12, 0.45) 55%, rgba(26, 24, 21, 0.95) 100%),
    radial-gradient(ellipse 45% 70% at 50% 55%, rgba(110, 31, 26, 0.3), transparent 70%),
    var(--arte-banner, none) center var(--arte-y, 45%) / cover no-repeat,
    linear-gradient(180deg, #0a0908 0%, #13110f 60%, #1a1815 100%);
}
.banner .logo-title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8); }
.banner .logo-sub { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95); }
body[data-secao="mundo"],
body[data-secao="jogar"] { --arte-banner: url('../img/arte/mundo.webp'); --arte-y: 38%; --deco-esq: url('../img/arte/canto-tuvstarr.webp'); --deco-dir: url('../img/arte/canto-troll.webp'); }
body[data-secao="canone"] { --arte-banner: url('../img/arte/canone.webp'); --arte-y: 55%; --deco-esq: url('../img/arte/canto-pesta.webp'); --deco-dir: url('../img/arte/canto-troll.webp'); }
body[data-secao="personagens"] { --arte-banner: url('../img/arte/personagens.webp'); --arte-y: 42%; --deco-esq: url('../img/arte/canto-troll.webp'); --deco-dir: url('../img/arte/canto-tuvstarr.webp'); }
body[data-secao="mesa"] { --arte-banner: url('../img/arte/mesa.webp'); --arte-y: 30%; --deco-esq: url('../img/arte/canto-troll.webp'); --deco-dir: url('../img/arte/canto-pesta.webp'); }
body[data-secao="cronicas"] { --arte-banner: url('../img/arte/cronicas.webp'); --arte-y: 50%; --deco-esq: url('../img/arte/canto-pesta.webp'); --deco-dir: url('../img/arte/canto-tuvstarr.webp'); }
body[data-secao="inicio"],
body[data-secao="creditos"] { --deco-esq: url('../img/arte/canto-troll.webp'); --deco-dir: url('../img/arte/canto-pesta.webp'); }
body[data-secao="creditos"] { --arte-banner: url('../img/arte/heroi.webp'); }

/* Início: a abadia em ruínas ocupa a largura toda atrás do texto e se dissolve no fundo. */
body[data-secao="inicio"] .hero::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(14, 13, 12, 0.55) 0%, rgba(14, 13, 12, 0.42) 40%, rgba(14, 13, 12, 0.8) 80%, var(--carvao) 100%),
    url('../img/arte/heroi.webp') center 55% / cover no-repeat;
  pointer-events: none;
}
body[data-secao="inicio"] .hero { padding-top: clamp(4rem, 12vw, 9rem); padding-bottom: clamp(4rem, 10vw, 7rem); }
body[data-secao="inicio"] .hero p:not(.lede):not(.kicker) { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95); color: var(--osso-claro); }

/* Cantos: ilustrações esmaecidas nas margens laterais, só quando sobra espaço ao redor da moldura. */
.deco { display: none; }
@media (min-width: 1360px) {
  /* ocupam a margem inteira, de cima a baixo, e ficam paradas enquanto a página rola */
  .deco {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: -1;
    width: calc((100vw - 54rem) / 2);
    background: var(--deco-img) center / cover no-repeat;
    opacity: 0.38;
    filter: sepia(0.35) saturate(0.75) brightness(0.8);
    pointer-events: none;
  }
  .deco-esq {
    left: 0;
    --deco-img: var(--deco-esq);
    -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 45%, transparent 100%);
  }
  .deco-dir {
    right: 0;
    --deco-img: var(--deco-dir);
    -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 45%, transparent 100%);
  }
}
body.modo-app .deco { display: none; }
@media print { .deco { display: none !important; } }

/* páginas de inspiração e créditos */
.pin-quadro { display: flex; justify-content: center; margin: 1.5rem 0; min-height: 12rem; max-width: 100%; overflow-x: auto; }
.creditos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.creditos-lista li { margin: 0; padding: 0; background: rgba(14, 13, 12, 0.45); border: 1px solid var(--ouro-fio); }
.creditos-lista img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: sepia(0.2); }
.creditos-lista p { margin: 0; padding: 0.55rem 0.7rem 0.7rem; font-size: 0.98rem; line-height: 1.45; }
.creditos-lista strong { color: var(--osso-claro); }

/* ícones dos itens (Tabler Icons e desenhos próprios, só contorno) */
.icone { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
.icone-item { margin-right: 0.4em; color: var(--ouro-claro); opacity: 0.9; }
.pericia-nome .icone-item { width: 1.25em; height: 1.25em; }
.app-cat-topo .icone-item, .app-item-topo .icone-item { margin-right: 0; width: 1.2rem; height: 1.2rem; }
.st-narrador .icone-item { color: var(--osso); }

/* ---------- 20. Criador: limpeza visual (menos caixas, rótulos legíveis, mais contraste) ---------- */
.app { --texto-2: #c4b89f; --texto-3: #a39780; --fundo-card: rgba(255, 244, 220, 0.035); --fundo-card-hover: rgba(255, 244, 220, 0.06); }
/* lateral */
.app-lado { width: auto; gap: 0.8rem; }
.app-pontos { padding: 0.75rem 0.85rem; border: 0; border-left: 3px solid var(--sangue-vivo); background: rgba(110, 31, 26, 0.22); }
.app-total { flex-wrap: nowrap; gap: 0.45rem; white-space: nowrap; }
.app-total span { font-family: var(--f-corpo); font-size: 1rem; color: var(--texto-2); }
.app-pontos p { margin: 0.15rem 0 0.6rem; font-family: var(--f-corpo); font-size: 0.92rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-medidores { font-size: 0.92rem; }
.app-medidores dt { color: var(--texto-2); white-space: nowrap; }
.app-medidores dd { white-space: nowrap; }
.app-quem .kicker { color: var(--texto-3); }
.app-etapa-botao { font-family: var(--f-corpo); font-size: 1rem; letter-spacing: 0; text-transform: none; border: 0; border-left: 3px solid transparent; background: transparent; padding: 0.4rem 0.55rem; }
.app-etapa-botao:hover { background: var(--fundo-card); }
.app-etapa-botao.is-current { background: rgba(110, 31, 26, 0.3); }
.app-salvar { border: 0; background: transparent; padding: 0; }
/* cabeçalho da etapa */
.app-cab p { color: var(--texto-2); }
/* painéis: sem moldura dupla */
.painel { background: transparent; border: 0; }
.painel-cab { border-bottom: 1px solid var(--ouro-fio); padding: 0.4rem 0.2rem 0.6rem; }
.painel-rolagem { padding: 0.5rem 0.2rem; }
.painel-cab h2 { font-size: 0.95rem; }
.painel-conta, .painel-conta-catalogo { font-family: var(--f-corpo); font-style: normal; font-size: 0.92rem; color: var(--texto-3); }
/* filtros: rótulos normais e chips sem borda */
.filtro-rotulo { min-width: 3.8rem; font-family: var(--f-corpo); font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.chip-p { padding: 0.15rem 0.6rem; font-family: var(--f-corpo); font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--texto-2); background: var(--fundo-card); border: 1px solid transparent; border-radius: 1rem; }
.chip-p:hover { color: var(--osso-claro); background: var(--fundo-card-hover); border-color: transparent; }
.chip-p[aria-pressed="true"] { color: #1b140c; background: var(--ouro-claro); border-color: var(--ouro-claro); }
.filtro-narrador { color: var(--texto-2); }
/* catálogo: sem linhas; destaque só no hover */
.app-catalogo { padding: 0.2rem 0; }
.app-cat-item { border-bottom: 0; padding: 0.45rem 0.5rem; border-radius: 2px; }
.app-cat-item:hover { background: var(--fundo-card-hover); }
.app-cat-resumo { color: var(--texto-2); font-size: 0.95rem; }
.app-cat-selo { font-family: var(--f-corpo); font-size: 0.92rem; color: var(--ouro-claro); }
.app-adicionar { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--ouro-linha); background: transparent; color: var(--ouro-claro); }
.app-adicionar:hover:not(:disabled) { background: var(--sangue-vivo); color: var(--osso-claro); border-color: var(--sangue-vivo); }
.app-adicionar:disabled { border-color: transparent; }
/* cards da ficha: fundo suave + faixa lateral, sem moldura */
.app-item { background: var(--fundo-card); border: 0; border-left: 3px solid var(--ouro-escuro); padding: 0.45rem 0.6rem; }
.app-item.aberto { background: var(--fundo-card-hover); }
.app-item-escolha { color: var(--texto-2); }
.app-item-cat { font-family: var(--f-corpo); font-size: 0.88rem; letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.app-item-meta, .criador-variante { color: var(--texto-2); }
.criador-campo > span { font-family: var(--f-corpo); font-size: 0.88rem; letter-spacing: 0; color: var(--texto-3); }
.app-item input, .app-item select, .criador-inline select, .painel-filtros .filtro-ordem, .criador-busca {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(168, 136, 74, 0.22);
}
.app-remover { border: 0; color: var(--texto-3); font-size: 1.2rem; }
.app-sub { font-family: var(--f-corpo); font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--osso-claro); }
.field-hint { color: var(--texto-2); }
/* etiquetas de efeito: pílulas sem borda */
.app .efeito-tag { min-width: 0; padding: 0.05rem 0.5rem; font-family: var(--f-corpo); font-size: 0.8rem; letter-spacing: 0; text-transform: none; border: 0; border-radius: 1rem; background: rgba(168, 136, 74, 0.14); }
.app .tag-condicional { background: rgba(224, 138, 94, 0.18); }
.app .tag-regra { background: rgba(255, 244, 220, 0.06); }
.app-efeitos summary { color: var(--texto-3); }
/* rodapé */
.app-rodape { background: transparent; }

/* ---------- 21. Cofre de personagens: seleção de personagem estilo MMO antigo ---------- */
.page-cofre { max-width: calc(72rem + 2rem); }
.cofre { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; align-items: start; }
.cofre-grade { display: grid; gap: 0.5rem; }
.cofre-slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--osso);
  background: linear-gradient(180deg, rgba(42, 38, 34, 0.9), rgba(22, 20, 18, 0.95));
  border: 1px solid var(--ouro-fio);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.cofre-slot:hover { border-color: var(--ouro-linha); transform: translateX(2px); }
.cofre-slot.is-sel { border-color: var(--ouro); background: linear-gradient(180deg, rgba(110, 31, 26, 0.45), rgba(22, 20, 18, 0.95)); box-shadow: 0 0 14px rgba(168, 136, 74, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.6); }
.cofre-slot:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }
.cofre-slot-texto { display: grid; min-width: 0; line-height: 1.3; }
.cofre-slot-nome { font-family: var(--f-titulo); font-size: 1.02rem; color: var(--osso-claro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cofre-slot-conceito, .cofre-slot-meta { font-size: 0.9rem; color: #c4b89f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cofre-slot-meta { color: #a39780; font-style: italic; }
.cofre-novo { border-style: dashed; background: transparent; }
.cofre-novo .cofre-slot-nome { color: var(--ouro-claro); }
.brasao {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3.4rem;
  font-family: var(--f-logo);
  font-size: 1.4rem;
  color: var(--ouro-claro);
  background: radial-gradient(circle at 50% 35%, rgba(168, 136, 74, 0.25), rgba(14, 13, 12, 0.9) 70%);
  border: 1px solid var(--ouro-linha);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}
.brasao.era-novo { background: radial-gradient(circle at 50% 35%, rgba(90, 120, 80, 0.4), rgba(14, 13, 12, 0.9) 70%); }
.brasao.era-magia { background: radial-gradient(circle at 50% 35%, rgba(80, 90, 140, 0.45), rgba(14, 13, 12, 0.9) 70%); }
.brasao.era-apocalipse { background: radial-gradient(circle at 50% 35%, rgba(134, 39, 31, 0.55), rgba(14, 13, 12, 0.9) 70%); }
.brasao-inicial { line-height: 1; margin-top: -0.35rem; }
.brasao-icone { position: absolute; bottom: 0.55rem; width: 0.95rem; height: 0.95rem; color: var(--osso); opacity: 0.85; }
.brasao-vazio { font-family: var(--f-titulo); font-size: 1.6rem; color: var(--ouro-escuro); background: transparent; border-style: dashed; }
.brasao-grande { width: 4.6rem; height: 5.2rem; font-size: 2.2rem; }
.brasao-grande .brasao-icone { width: 1.3rem; height: 1.3rem; bottom: 0.9rem; }
.cofre-slot .personagem-selo { font-size: 0.66rem; }

.cofre-painel {
  position: sticky;
  top: 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: linear-gradient(180deg, rgba(28, 26, 23, 0.97), rgba(14, 13, 12, 0.97));
  border: 1px solid var(--ouro-linha);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 40px rgba(0, 0, 0, 0.5);
}
.cofre-vazio { margin: 0; font-style: italic; color: #c4b89f; }
.cofre-cab { display: flex; gap: 1rem; align-items: center; padding-bottom: 0.9rem; border-bottom: 1px solid var(--ouro-fio); }
.cofre-id { min-width: 0; }
.scroll .cofre-nome, .cofre-nome { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--osso-claro); }
.cofre-conceito { margin: 0.15rem 0 0; font-style: italic; color: #c4b89f; }
.cofre-meta { margin: 0.15rem 0 0; font-size: 0.92rem; color: #a39780; }
.cofre-atributos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1rem 0 0.5rem; }
.cofre-atr { display: grid; justify-items: center; padding: 0.4rem 0.2rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--ouro-fio); }
.cofre-atr-sigla { font-family: var(--f-titulo); font-size: 0.8rem; letter-spacing: 0.1em; color: #a39780; }
.cofre-atr strong { font-family: var(--f-titulo); font-size: 1.6rem; line-height: 1.1; color: var(--ouro-claro); }
.cofre-secundarias { margin: 0; font-size: 0.95rem; text-align: center; color: #c4b89f; }
.cofre-saldo { margin: 0.35rem 0 0; font-size: 0.92rem; text-align: center; color: #a39780; }
.cofre-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.4rem 1.25rem; margin-top: 0.9rem; }
.cofre-secao h3 { margin: 0.6rem 0 0.35rem; font-size: 0.95rem; letter-spacing: 0.06em; color: var(--ouro-claro); }
.cofre-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.15rem; }
.cofre-lista li { display: flex; align-items: center; gap: 0.1rem; margin: 0; font-size: 0.98rem; }
.cofre-item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cofre-item-valor { font-family: var(--f-titulo); color: var(--ouro-claro); }
.cofre-nada { margin: 0; color: #a39780; }
.cofre-pendencias { margin: 0.9rem 0 0; padding: 0.5rem 0.7rem; font-size: 0.92rem; color: #e8b596; background: rgba(224, 138, 94, 0.1); border-left: 3px solid #e08a5e; }
.cofre-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--ouro-fio); }
.cofre-apagar { margin-left: auto; color: #c48a74; }
.cofre-rodape { margin-top: 1rem; }
.app-voltar-cofre { text-decoration: none; }
@media (max-width: 899px) {
  .cofre { grid-template-columns: minmax(0, 1fr); }
  .cofre-painel { position: static; }
  .cofre-atributos { gap: 0.35rem; }
}

/* criador: pontos de partida (modelos) */
.modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.5rem; margin: 0.4rem 0 0; }
.modelo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  font: inherit;
  text-align: left;
  color: var(--osso);
  background: rgba(255, 244, 220, 0.035);
  border: 1px solid var(--ouro-fio);
  cursor: pointer;
}
.modelo:hover { border-color: var(--ouro-linha); background: rgba(255, 244, 220, 0.06); }
.modelo.confirmar { border-color: #e08a5e; background: rgba(224, 138, 94, 0.1); }
.modelo-icone { grid-row: 1 / 3; width: 1.8rem; height: 1.8rem; color: var(--ouro-claro); }
.modelo strong { font-family: var(--f-titulo); font-size: 0.98rem; color: var(--osso-claro); }
.modelo span { font-size: 0.88rem; line-height: 1.35; color: #c4b89f; }
.modelo:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }

/* ---------- 22. Janela "Como quer começar?" (botão Jogar) ---------- */
.jogar-dialogo {
  width: min(44rem, calc(100vw - 2rem));
  padding: 1.5rem 1.4rem 1.4rem;
  color: var(--osso);
  background: linear-gradient(180deg, #221f1b, #141210);
  border: 1px solid var(--ouro-linha);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 20px 60px rgba(0, 0, 0, 0.7);
}
.jogar-dialogo::backdrop { background: rgba(5, 4, 3, 0.75); backdrop-filter: blur(2px); }
.jogar-dialogo h2 { margin: 0 0 1rem; text-align: center; color: var(--ouro-claro); }
.jogar-fechar { position: absolute; top: 0.5rem; right: 0.6rem; width: 2rem; height: 2rem; font-size: 1.4rem; color: var(--osso-fosco); background: none; border: 0; cursor: pointer; }
.jogar-fechar:hover { color: var(--osso-claro); }
.jogar-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; }
.jogar-opcao {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: 1rem 0.9rem;
  text-align: center;
  text-decoration: none;
  color: var(--osso);
  background: rgba(255, 244, 220, 0.035);
  border: 1px solid var(--ouro-fio);
  transition: border-color 0.15s, background 0.15s;
}
.jogar-opcao:hover, .jogar-opcao:focus-visible { color: var(--osso); border-color: var(--ouro); background: rgba(110, 31, 26, 0.3); text-decoration: none; }
.jogar-opcao strong { font-family: var(--f-titulo); font-size: 1.05rem; color: var(--osso-claro); }
.jogar-opcao span { font-size: 0.95rem; line-height: 1.4; color: #c4b89f; }
.jogar-opcao .jogar-glifo { font-size: 1.8rem; line-height: 1; color: var(--ouro-claro); }

/* criador: janela de escolha (versão, nível, autocontrole, especialização) */
.config-dialogo {
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.2rem 1.25rem 1rem;
  overflow: auto;
  color: var(--osso);
  background: linear-gradient(180deg, #221f1b, #141210);
  border: 1px solid var(--ouro-linha);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 20px 60px rgba(0, 0, 0, 0.7);
}
.config-dialogo::backdrop { background: rgba(5, 4, 3, 0.75); }
.config-cab { display: flex; align-items: center; gap: 0.6rem; padding-right: 2rem; }
.config-cab h2 { margin: 0; font-size: 1.35rem; color: var(--ouro-claro); }
.config-icone { width: 1.8rem; height: 1.8rem; color: var(--ouro-claro); }
.config-resumo { margin: 0.4rem 0 0; color: #c4b89f; }
.config-corpo h3 { margin: 1rem 0 0.4rem; font-family: var(--f-corpo); font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--osso-claro); }
.config-opcoes { display: grid; gap: 0.4rem; }
.config-opcao { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.55rem 0.7rem; background: rgba(255, 244, 220, 0.035); border: 1px solid var(--ouro-fio); cursor: pointer; }
.config-opcao:has(input:checked) { border-color: var(--ouro); background: rgba(110, 31, 26, 0.3); }
.config-opcao input { margin-top: 0.3rem; accent-color: var(--sangue-vivo); }
.config-opcao-texto { display: grid; gap: 0.1rem; }
.config-opcao-texto strong { color: var(--osso-claro); }
.config-opcao-valor { font-family: var(--f-titulo); font-size: 0.85rem; color: var(--ouro-claro); }
.config-opcao-desc { font-size: 0.92rem; color: #c4b89f; }
.config-passo { display: flex; align-items: center; gap: 0.9rem; }
.config-passo .btn { width: 2.6rem; padding: 0.3rem 0; font-size: 1.2rem; }
.config-nivel { min-width: 2rem; font-family: var(--f-titulo); font-size: 1.6rem; text-align: center; color: var(--ouro-claro); }
.config-faixa { width: 100%; accent-color: var(--sangue-vivo); }
.config-dica { margin: 0.2rem 0 0; font-size: 0.92rem; color: #c4b89f; }
.config-corpo input[type="number"], .config-texto {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font-family: var(--f-corpo);
  font-size: 1rem;
  color: var(--osso-claro);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--ouro-linha);
}
.config-texto option { color: var(--osso-claro); background: var(--pedra); }
.config-pe { position: sticky; bottom: -1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 1.1rem -1.25rem -1rem; padding: 0.8rem 1.25rem; background: #141210; border-top: 1px solid var(--ouro-fio); }
.config-custo { flex: 1 1 100%; font-family: var(--f-titulo); color: var(--ouro-claro); }
.config-pe .btn { flex: 1 1 auto; }
@media (min-width: 520px) { .config-pe { flex-wrap: nowrap; } .config-custo { flex: 1 1 auto; min-width: 0; } .config-pe .btn { flex: 0 0 auto; } }

/* combate: resumo (criador, cofre, ficha completa) */
.combate-linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: 0.35rem; }
.combate-caixa { display: grid; justify-items: center; padding: 0.35rem 0.2rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--ouro-fio); }
.combate-caixa span { font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.08em; color: #a39780; }
.combate-caixa strong { font-family: var(--f-titulo); font-size: 1.15rem; color: var(--ouro-claro); white-space: nowrap; }
.combate-nota { margin: 0.4rem 0 0; font-size: 0.92rem; color: #c4b89f; }
.combate-armas { width: 100%; margin: 0.6rem 0 0; border-collapse: collapse; font-size: 0.95rem; }
.combate-armas th { padding: 0.25rem 0.4rem; font-family: var(--f-titulo); font-size: 0.75rem; letter-spacing: 0.06em; text-align: left; color: #a39780; border-bottom: 1px solid var(--ouro-fio); }
.combate-armas td { padding: 0.3rem 0.4rem; border-bottom: 1px solid rgba(168, 136, 74, 0.1); white-space: nowrap; }
.combate-armas td:first-child { white-space: normal; }
.combate-resumo { margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--ouro-fio); }
.app-fisico { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sem-treino { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); column-gap: 1.2rem; }

/* em jogo: PV, PF e efeitos durante a sessão */
.em-jogo { margin: 1rem 0; padding: 0.8rem 0.9rem; background: rgba(110, 31, 26, 0.12); border: 1px solid var(--ouro-linha); border-left: 3px solid var(--sangue-vivo); }
.em-jogo-compacto { margin: 0.8rem 0 0.4rem; }
.em-jogo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.scroll .em-jogo-cab h3, .em-jogo-cab h3 { margin: 0; font-size: 1rem; letter-spacing: 0.06em; color: var(--ouro-claro); }
.em-jogo-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 0.6rem 1rem; margin-top: 0.5rem; }
.em-jogo-rotulo { font-family: var(--f-titulo); font-size: 0.78rem; letter-spacing: 0.08em; color: #a39780; }
.em-jogo-linha { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.15rem; }
.em-jogo-linha .btn { width: 2.1rem; padding: 0.2rem 0; font-size: 1.1rem; }
.em-jogo-valor { width: 3.6rem; padding: 0.2rem 0.3rem; font-family: var(--f-titulo); font-size: 1.2rem; text-align: center; color: var(--osso-claro); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--ouro-linha); }
.em-jogo-max { font-family: var(--f-titulo); color: #a39780; }
.em-jogo-barra { height: 0.3rem; margin-top: 0.3rem; background: rgba(0, 0, 0, 0.5); }
.em-jogo-barra span { display: block; height: 100%; background: var(--ouro-escuro); transition: width 0.2s; }
.em-jogo-barra.baixo span { background: #c0563a; }
.em-jogo-agora { margin: 0.5rem 0 0; font-size: 0.95rem; color: #c4b89f; }
.em-jogo-efeitos { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.95rem; }
.em-jogo-efeitos li { margin: 0.1rem 0; }
.em-jogo-efeitos .grave-1 { color: var(--ouro-claro); }
.em-jogo-efeitos .grave-2 { color: #e08a5e; }
.em-jogo-efeitos .grave-3 { color: #ff7a5c; font-weight: 700; }
.em-jogo-notas { width: 100%; margin-top: 0.6rem; padding: 0.45rem 0.6rem; font-family: var(--f-corpo); font-size: 1rem; color: var(--osso-claro); background: rgba(0, 0, 0, 0.35); border: 1px solid var(--ouro-linha); resize: vertical; }
@media print { .em-jogo { display: none !important; } }

/* rolador: números clicáveis e quadro de rolagens */
.rolavel { cursor: pointer; border-radius: 2px; transition: background 0.12s, box-shadow 0.12s; }
.rolavel:hover, .rolavel:focus-visible { background: rgba(168, 136, 74, 0.18); box-shadow: 0 0 0 1px var(--ouro-linha); outline: none; }
.rolagens {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  width: min(21rem, calc(100vw - 2rem));
  max-height: 60vh;
  overflow: auto;
  color: var(--osso);
  background: linear-gradient(180deg, #221f1b, #141210);
  border: 1px solid var(--ouro-linha);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
.rolagens[hidden] { display: none; }
.rolagens-cab { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--ouro-fio); }
.rolagens-titulo { flex: 1; padding: 0; font-family: var(--f-titulo); font-size: 0.85rem; letter-spacing: 0.08em; text-align: left; color: var(--ouro-claro); background: none; border: 0; cursor: pointer; }
.rolagens .btn-link { font-size: 0.9rem; }
.rolagens.fechado .rolagens-lista, .rolagens.fechado .rolagens-mod { display: none; }
.rolagem-dica { font-style: italic; color: #a39780; }
.rolagens-lista { margin: 0; padding: 0.3rem 0.5rem 0.5rem; list-style: none; }
.rolagem { display: grid; gap: 0.05rem; margin: 0; padding: 0.35rem 0.4rem; border-bottom: 1px solid rgba(168, 136, 74, 0.1); font-size: 0.92rem; }
.rolagem.nova { background: rgba(168, 136, 74, 0.1); animation: rolagem-entra 0.35s ease-out; }
.rolagem strong { color: var(--osso-claro); }
.rolagem-conta { font-family: var(--f-titulo); color: #c4b89f; }
.rolagem-resultado { font-weight: 700; }
.rolagem.sucesso .rolagem-resultado { color: #a9c47f; }
.rolagem.falha .rolagem-resultado { color: #e08a5e; }
.rolagem.critico .rolagem-resultado { color: #e6c25a; }
.rolagem.falha-critica .rolagem-resultado { color: #ff6a4c; }
.rolagem.dano .rolagem-resultado { color: var(--ouro-claro); font-weight: 400; }
@keyframes rolagem-entra { from { transform: translateY(-4px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rolagem.nova { animation: none; } }
@media print { .rolagens { display: none !important; } }

/* rolagens: modificador; histórico de pontos; manobras */
.rolagens-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; padding: 0.4rem 0.7rem; font-size: 0.88rem; border-bottom: 1px solid var(--ouro-fio); }
.rolagens-mod.ativo { background: rgba(224, 138, 94, 0.12); }
.rolagens-mod label { font-family: var(--f-titulo); font-size: 0.75rem; letter-spacing: 0.06em; color: #a39780; }
.rolagens-mod input { padding: 0.15rem 0.35rem; font-family: var(--f-corpo); font-size: 0.92rem; color: var(--osso-claro); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--ouro-linha); }
.rolagens-mod input[type="number"] { width: 3.6rem; text-align: center; }
.rolagens-mod input:not([type]) { flex: 1 1 8rem; min-width: 0; }
.em-jogo-ganho { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.em-jogo-ganho input { padding: 0.3rem 0.45rem; font-family: var(--f-corpo); font-size: 0.95rem; color: var(--osso-claro); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--ouro-linha); }
.em-jogo-ganho input[type="number"] { width: 4rem; text-align: center; }
.em-jogo-ganho input:not([type]) { flex: 1 1 12rem; min-width: 0; }
.em-jogo-ganho .btn { padding: 0.3rem 0.8rem; font-size: 0.8rem; }
.em-jogo-historico { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.92rem; }
.em-jogo-historico li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; margin: 0.15rem 0; color: #c4b89f; }
.em-jogo-hist-pts { min-width: 2rem; font-family: var(--f-titulo); color: #a9c47f; }
.manobras { margin-top: 0.6rem; }
.manobras summary { cursor: pointer; font-family: var(--f-titulo); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--ouro-claro); }
.manobras-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.6rem 1.2rem; margin: 0.6rem 0 0; }
.manobras-lista dt { font-family: var(--f-titulo); font-size: 0.95rem; color: var(--osso-claro); }
.manobras-lista dd { margin: 0.1rem 0 0; font-size: 0.92rem; line-height: 1.4; }
.manobras-lista .manobra-meta { font-style: italic; color: #a39780; }
@media print { .manobras { display: none !important; } }

.combate-indice { margin: 1rem 0 0; padding: 0.5rem 0.8rem; font-family: var(--f-titulo); font-size: 0.9rem; letter-spacing: 0.04em; text-align: center; background: rgba(14, 13, 12, 0.45); border: 1px solid var(--ouro-fio); }

/* diário da sessão */
.diario { margin-top: 0.8rem; }
.scroll .diario h4, .diario h4 { margin: 0 0 0.2rem; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--ouro-claro); }
.diario-lista { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.93rem; }
.diario-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: baseline; margin: 0; padding: 0.2rem 0; border-bottom: 1px solid rgba(168, 136, 74, 0.1); }
.diario-quando { font-family: var(--f-titulo); font-size: 0.78rem; color: #a39780; white-space: nowrap; }
.diario-rolagem .diario-texto { color: #c4b89f; font-style: italic; }
.rolagem-diario { justify-self: start; font-size: 0.8rem; }
.rolagem-diario:disabled { color: #a9c47f; text-decoration: none; cursor: default; }

/* "Mais sobre" dos itens (enriquecimento) */
.detalhes-item { margin: 0.4rem 0 0.2rem; font-size: 0.95rem; line-height: 1.5; }
.detalhes-item summary { cursor: pointer; font-family: var(--f-titulo); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ouro-claro); }
.detalhes-item[open] { padding: 0.2rem 0 0.4rem 0.7rem; border-left: 2px solid var(--ouro-linha); }
.detalhes-item p { margin: 0.45rem 0 0; }
.detalhes-item h4 { margin: 0.6rem 0 0; font-family: var(--f-titulo); font-size: 0.78rem; letter-spacing: 0.06em; color: #a39780; }
.detalhes-exemplos { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.detalhes-exemplos li { margin: 0.1rem 0; }
.detalhes-dica, .detalhes-rel { font-style: italic; color: #c4b89f; }
/* itens: card compacto + janela de detalhes (js/detalhes.js) */
.lista-pericias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.6rem; }
.lista-pericias .pericia-vazio { grid-column: 1 / -1; }
.item-card {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.65rem 0.75rem 0.6rem;
  font: inherit;
  text-align: left;
  color: var(--osso);
  background: rgba(255, 244, 220, 0.035);
  border: 1px solid var(--ouro-fio);
  border-left: 3px solid var(--ouro);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.item-card:hover, .item-card:focus-visible { background: rgba(110, 31, 26, 0.22); border-color: var(--ouro-linha); transform: translateY(-1px); }
.item-card.st-narrador { border-left-color: var(--brasa); }
.item-card.st-nao { border-left-color: #4a4640; opacity: 0.8; }
.item-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--ouro-fio); }
.item-card-topo { display: flex; align-items: flex-start; gap: 0.45rem; min-width: 0; }
.item-card-icone { flex: none; width: 1.3rem; height: 1.3rem; color: var(--ouro-claro); }
.item-card-nome { flex: 1 1 auto; min-width: 0; font-family: var(--f-titulo); font-size: 0.98rem; font-weight: 600; line-height: 1.25; color: var(--ouro-claro); overflow-wrap: anywhere; }
.item-card-selo { flex: none; max-width: 45%; text-align: right; padding-top: 0.15rem; font-family: var(--f-titulo); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--osso); }
.item-card-resumo { display: -webkit-box; overflow: hidden; font-size: 0.95rem; line-height: 1.4; color: #d8ccb4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item-card-pe { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.8rem; color: var(--osso-fosco); }
.item-card-status { font-family: var(--f-titulo); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a9c47f; }
.st-narrador .item-card-status { color: var(--brasa); }
.st-nao .item-card-status { color: #8f887c; }
.item-card-raridade { font-family: var(--f-titulo); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ouro-claro); }
.item-card-cat { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.item-dialogo {
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.2rem 1.3rem 1.1rem;
  overflow: auto;
  color: var(--osso);
  background: linear-gradient(180deg, #221f1b, #141210);
  border: 1px solid var(--ouro-linha);
  border-top: 3px solid var(--ouro);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 20px 60px rgba(0, 0, 0, 0.7);
}
.item-dialogo.st-narrador { border-top-color: var(--brasa); }
.item-dialogo.st-nao { border-top-color: #4a4640; }
.item-dialogo::backdrop { background: rgba(5, 4, 3, 0.75); backdrop-filter: blur(2px); }
.item-dialogo-img { display: block; width: 100%; max-height: 16rem; margin: 0 0 0.8rem; object-fit: cover; border: 1px solid var(--ouro-fio); }
.item-dialogo-cab { display: flex; align-items: center; gap: 0.7rem; padding-right: 2rem; }
.item-dialogo-icone { flex: none; width: 2.4rem; height: 2.4rem; color: var(--ouro-claro); }
.item-dialogo-titulos { flex: 1 1 auto; min-width: 0; }
.item-dialogo-tipo { margin: 0; font-family: var(--f-titulo); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: #a39780; }
.item-dialogo-cab h2 { margin: 0; font-size: 1.4rem; line-height: 1.2; color: var(--ouro-claro); }
.item-dialogo-selo { flex: none; font-family: var(--f-titulo); font-size: 0.9rem; color: var(--osso-claro); }
.item-dialogo-chips { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.5rem; }
.item-dialogo-resumo { margin: 0.6rem 0 0; font-size: 1.05rem; font-style: italic; color: #d8ccb4; }
.item-dialogo-corpo { font-size: 1rem; line-height: 1.55; }
.item-dialogo-ilustracao { margin: 0.9rem 0 0.3rem; text-align: center; }
.item-dialogo-ilustracao img { display: inline-block; max-width: 100%; height: 11rem; }
.item-dialogo-corpo p { margin: 0.6rem 0 0; }
.item-dialogo-corpo h4 { margin: 0.9rem 0 0.1rem; font-family: var(--f-titulo); font-size: 0.78rem; letter-spacing: 0.08em; color: #a39780; }
.item-dialogo-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.35rem 1rem; margin: 1rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--ouro-fio); font-size: 0.9rem; }
.item-dialogo-meta dt { font-family: var(--f-titulo); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a39780; }
.item-dialogo-meta dd { margin: 0; color: var(--osso-claro); }
.item-dialogo-pe { display: flex; justify-content: flex-end; margin-top: 1rem; }
.item-rel { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.item-rel-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; font: inherit; font-size: 0.88rem; color: var(--osso-claro); background: rgba(255, 244, 220, 0.04); border: 1px solid var(--ouro-fio); cursor: pointer; }
.item-rel-chip:hover, .item-rel-chip:focus-visible { border-color: var(--ouro); background: rgba(110, 31, 26, 0.3); }
.item-rel-chip .icone-item { width: 1rem; height: 1rem; }
.app-item-nome-btn { padding: 0; font: inherit; font-weight: 700; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; text-decoration: underline dotted rgba(201, 169, 110, 0.45); text-underline-offset: 3px; }
.app-item-nome-btn:hover, .app-item-nome-btn:focus-visible { color: var(--ouro-claro); }
@media print { .item-dialogo { display: none !important; } }
@media print { .detalhes-item { display: none !important; } }

/* ---------- ficha em tela cheia (Cofre › personagem): barra no topo, seções à esquerda, conteúdo filtrado ---------- */
body.modo-ficha .site-header { display: none; }
body.modo-ficha main.page { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; display: flex; }
body.modo-ficha .fx { flex: 1; min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.fx-topo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(180deg, #221f1b, #161412);
  border-bottom: 1px solid var(--ouro-linha);
}
.fx-voltar { flex: none; padding: 0.3rem 0.5rem; font-family: var(--f-titulo); font-size: 0.9rem; color: var(--ouro-claro); text-decoration: none; border: 1px solid var(--ouro-fio); }
.fx-voltar:hover, .fx-voltar:focus-visible { color: var(--osso-claro); border-color: var(--ouro); text-decoration: none; }
.fx-menu-btn { display: none; flex: none; width: 2.4rem; height: 2.2rem; font-size: 1.2rem; color: var(--osso-claro); background: none; border: 1px solid var(--ouro-fio); cursor: pointer; }
.fx-quem { flex: 1 1 auto; min-width: 0; }
.fx-quem h1 { margin: 0; overflow: hidden; font-size: 1.35rem; line-height: 1.15; color: var(--ouro-claro); text-overflow: ellipsis; white-space: nowrap; }
.fx-kicker { margin: 0; overflow: hidden; font-size: 0.85rem; color: var(--osso-fosco); text-overflow: ellipsis; white-space: nowrap; }
.fx-pontos { display: flex; flex: none; align-items: baseline; gap: 0.6rem; font-size: 0.9rem; color: var(--osso-fosco); }
.fx-pontos strong { font-family: var(--f-titulo); font-size: 1.1rem; color: var(--osso-claro); }
.fx-mais { position: relative; flex: none; }
.fx-mais summary { display: grid; place-items: center; width: 2.4rem; height: 2.2rem; font-size: 1.3rem; line-height: 1; color: var(--osso-claro); list-style: none; border: 1px solid var(--ouro-fio); cursor: pointer; }
.fx-mais summary::-webkit-details-marker { display: none; }
.fx-mais[open] summary { border-color: var(--ouro); background: rgba(110, 31, 26, 0.3); }
.fx-mais-menu { position: absolute; top: calc(100% + 0.35rem); right: 0; z-index: 30; display: grid; gap: 0.4rem; min-width: 14rem; padding: 0.6rem; background: #1a1815; border: 1px solid var(--ouro-linha); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
.fx-mais-menu .btn { justify-content: center; }
.fx-mais-menu .copiado { font-size: 0.85rem; }
.fx-corpo { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); min-height: 0; }
.fx-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.6rem; overflow: auto; background: linear-gradient(180deg, rgba(28, 26, 23, 0.95), rgba(14, 13, 12, 0.95)); border-right: 1px solid var(--ouro-linha); }
.fx-nav-item { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.55rem 0.65rem; font-family: var(--f-titulo); font-size: 0.9rem; text-align: left; color: var(--osso); background: none; border: 1px solid transparent; border-left: 3px solid transparent; cursor: pointer; }
.fx-nav-item:hover, .fx-nav-item:focus-visible { color: var(--osso-claro); background: rgba(168, 136, 74, 0.08); }
.fx-nav-item.ativo { color: var(--ouro-claro); background: rgba(110, 31, 26, 0.28); border-color: var(--ouro-fio); border-left-color: var(--ouro); }
.fx-nav-item span:first-of-type { flex: 1 1 auto; }
.fx-nav-icone { flex: none; width: 1.15rem; height: 1.15rem; color: var(--ouro-claro); }
.fx-nav-conta { min-width: 1.6rem; padding: 0 0.35rem; font-size: 0.78rem; text-align: center; color: var(--osso-fosco); border: 1px solid var(--ouro-fio); border-radius: 999px; }
.fx-nav-alerta { display: grid; place-items: center; width: 1.2rem; height: 1.2rem; font-size: 0.75rem; font-weight: 700; color: #1a1210; background: #e08a5e; border-radius: 50%; }
.fx-veu { display: none; }
.fx-conteudo { min-width: 0; overflow: auto; padding: 1rem 1.25rem 6rem; }
.fx-conteudo > .lede { margin: 0 0 0.8rem; }
.fx-sec-titulo { margin: 0 0 0.8rem; font-size: 1.3rem; color: var(--ouro-claro); }
.fx-sec > .ficha-bloco, .fx-sec > .em-jogo, .fx-sec > .ficha-grade { margin-bottom: 1rem; }
.fx-sec .ficha-grade { margin-top: 0; }
.fx-busca { width: 100%; margin: 0 0 0.6rem; padding: 0.4rem 0.6rem; font-family: var(--f-corpo); font-size: 1rem; color: var(--osso-claro); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--ouro-linha); }
.fx-nome-item { display: inline-flex; align-items: center; gap: 0.35rem; }
.fx-nh { font-family: var(--f-titulo); font-size: 1.05rem; }
.fx-eq-resumo { margin: 0 0 1rem; }
.fx-sec [data-busca][hidden] { display: none; }

/* celular: o menu de seções vira gaveta que desliza da esquerda */
@media (max-width: 899px) {
  .fx-topo { gap: 0.4rem; padding: 0.4rem 10px; }
  .fx-voltar span { display: none; }
  .fx-menu-btn { display: block; }
  .fx-quem h1 { font-size: 1.1rem; }
  .fx-kicker { display: none; }
  .fx-pontos { flex-direction: column; align-items: flex-end; gap: 0; font-size: 0.75rem; }
  .fx-pontos strong { font-size: 0.95rem; }
  .fx-pontos .personagem-selo { display: none; }
  .fx-corpo { grid-template-columns: minmax(0, 1fr); position: relative; }
  .fx-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: min(17rem, 82vw); padding-top: calc(0.8rem + env(safe-area-inset-top)); transform: translateX(-102%); transition: transform 0.2s ease; background: #171513; box-shadow: 8px 0 30px rgba(0, 0, 0, 0.6); }
  .fx-nav.aberta { transform: none; }
  .fx-veu:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(5, 4, 3, 0.6); }
  .fx-nav-item { padding: 0.75rem 0.7rem; font-size: 1rem; }
  .fx-conteudo { padding: 0.7rem 10px 7rem; }
  .fx-mais-menu { position: fixed; top: 3.2rem; right: 10px; left: 10px; min-width: 0; }
  /* armas: no celular ficam nome, dano, NH e aparar (alcance, ST e perícia estão no detalhe do item) */
  .fx .combate-armas th:nth-child(n+5), .fx .combate-armas td:nth-child(n+5) { display: none; }
  .fx .table-wrap th:nth-child(n+4):not(:last-child), .fx .table-wrap td:nth-child(n+4):not(:last-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-nav { transition: none; } }

/* Celular: a tela também fica parada. Em cima, o saldo numa linha e as etapas; embaixo, Voltar · Salvar · Continuar;
   no meio, só o conteúdo rola. */
@media (max-width: 899px) {
  body.modo-app { height: 100vh; height: 100dvh; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  body.modo-app .site-header { flex: none; }
  body.modo-app .app { flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app-lado { gap: 0.4rem; padding: 0.45rem 12px 0.35rem; border-right: 0; border-bottom: 1px solid var(--ouro-linha); overflow: visible; }
  .app-quem, .app-salvar { display: none; }
  .app-pontos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.8rem; padding: 0.35rem 0.6rem; }
  .app-total strong { font-size: 1.4rem; }
  .app-total span { font-size: 0.9rem; }
  .app-pontos p { margin: 0; font-size: 0.85rem; }
  .app-medidores { display: flex; flex-wrap: wrap; gap: 0 0.8rem; flex: 1 1 100%; font-size: 0.82rem; }
  .app-medidores div { gap: 0.3rem; }
  .app-etapas { display: flex; gap: 0.2rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .app-etapas::-webkit-scrollbar { display: none; }
  .app-etapa-botao { flex: none; width: auto; grid-template-columns: auto auto auto; gap: 0.3rem; padding: 0.3rem 0.55rem; font-size: 0.9rem; scroll-snap-align: center; }
  .app-principal { min-height: 0; }
  .app-cab { padding: 0.5rem 12px 0.4rem; }
  .app-cab h1 { font-size: 1.2rem; }
  .app-cab p { font-size: 0.88rem; }
  .app-corpo { overflow: auto; padding: 0.6rem 12px 1rem; }
  .app-duplo { display: flex; flex-direction: column; overflow: auto; }
  .app-duplo .painel { flex: none; }
  .painel-rolagem { max-height: none; overflow: visible; }
  .app-catalogo { max-height: 55vh; overflow: auto; }
  .app-rodape { position: static; flex: none; flex-wrap: wrap; gap: 0.4rem; padding: 0.45rem 12px calc(0.45rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--ouro-linha); background: #13110f; }
  .app-rodape-status { flex-basis: 100%; order: -1; font-size: 0.82rem; }
  .app-rodape-status:empty { display: none; }
  .app-rodape .btn { flex: 1 1 0; padding: 0.55rem 0.5rem; font-size: 0.8rem; }
  .app-rodape [data-seguir] { margin-left: 0; }
  .app-rodape [data-seguir][hidden] { display: none; }
  .app-salvar-movel { display: inline-flex; justify-content: center; }
  .app-salvar-movel[hidden] { display: none; }
  /* filtros recolhidos atrás do botão "Filtros" */
  .filtro-toggle { display: inline-block; flex: none; font-size: 0.95rem; }
  .painel-filtros .filtro-chips, .painel-filtros .filtros-pe { display: none; }
  .painel-filtros.filtros-abertos .filtro-chips, .painel-filtros.filtros-abertos .filtros-pe { display: flex; }
  .filtros-linha { flex-wrap: wrap; align-items: center; }
  .filtros-linha .criador-busca { flex: 1 1 100%; }
  .filtros-linha .filtro-ordem { flex: 1 1 auto; max-width: 12rem; }
  .filtro-toggle { margin-left: auto; }
}
/* no celular, "100vh" inclui a área escondida pela barra do navegador: a altura mínima da base não pode valer aqui */
html:has(body.modo-app) { height: 100%; overflow: hidden; }

/* ---------- 23. Ficha para imprimir (A4, preto no branco, duas colunas) ---------- */
@media print {
  @page { size: A4; margin: 12mm 11mm; }
  html, body { background: #fff !important; font-size: 10pt; line-height: 1.35; }
  body::before, .deco, .banner, .site-header, .site-footer, .ficha-acoes, #modo-lista, .page-links, .noscript, .jogar-dialogo { display: none !important; }
  .page, .page-wide, .page-cofre { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .scroll { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  .scroll::before, .scroll::after, .page-head::after { display: none !important; }
  .page-head { margin: 0 0 3mm !important; padding: 0 0 2mm !important; text-align: left !important; border-bottom: 1.5pt solid #000; }
  .page-head h1 { margin: 0 !important; font-size: 20pt !important; color: #000 !important; text-shadow: none !important; }
  .page-head .kicker, .page-head .lede { margin: 0 !important; font-size: 9.5pt !important; color: #000 !important; }
  .ficha { columns: 2; column-gap: 7mm; }
  .ficha * { color: #000 !important; text-shadow: none !important; }
  .ficha-pontos, .ficha-grade, .ficha-bloco, .combate-resumo, .ficha-traco, .combate-armas tr { break-inside: avoid; }
  .ficha-pontos { column-span: all; display: flex; gap: 6mm; padding: 1.5mm 2mm !important; background: none !important; border: 1pt solid #000 !important; }
  .ficha-pontos strong { font-size: 14pt !important; }
  .ficha-grade { column-span: all; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 3mm !important; margin: 2mm 0 !important; }
  .ficha-bloco { margin: 0 0 3mm !important; padding: 1.5mm 2mm !important; background: none !important; border: 0.75pt solid #000 !important; }
  .ficha-combate { column-span: all; }
  .ficha-titulo { margin: 0 0 1mm !important; font-size: 10pt !important; border-bottom: 0.5pt solid #000; }
  .ficha-valores > div { padding: 0.3mm 0 !important; border-bottom: 0.3pt solid #999 !important; }
  .combate-caixa, .cofre-atr { background: none !important; border: 0.75pt solid #000 !important; padding: 0.8mm !important; }
  .combate-caixa strong { font-size: 11pt !important; }
  .combate-armas th, .combate-armas td, .table-wrap th, .table-wrap td { padding: 0.5mm 1mm !important; border-bottom: 0.3pt solid #999 !important; background: none !important; font-size: 9pt; }
  .table-wrap { overflow: visible !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  .efeito-tag { border: 0.5pt solid #000 !important; background: none !important; }
  .efeitos { font-size: 8.5pt; }
  .icone { color: #000 !important; }
  a { text-decoration: none !important; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap th { background: none !important; }
  /* ficha em tela cheia: imprime todas as seções, sem barra nem menu */
  html:has(body.modo-ficha), body.modo-ficha { height: auto !important; overflow: visible !important; display: block !important; }
  body.modo-ficha main.page, body.modo-ficha .fx, .fx-corpo { display: block !important; }
  .fx-nav, .fx-veu, .fx-menu-btn, .fx-voltar, .fx-mais, .fx-pontos, .fx-sec-titulo, .fx-busca, .fx-sec[data-sec="jogo"], .fx-so-tela { display: none !important; }
  .fx-sec[hidden] { display: block !important; }
  .fx-topo { display: block !important; padding: 0 0 2mm !important; margin: 0 0 3mm !important; background: none !important; border-bottom: 1.5pt solid #000 !important; }
  .fx-quem h1 { font-size: 20pt !important; color: #000 !important; white-space: normal !important; }
  .fx-kicker { display: block !important; font-size: 9.5pt !important; color: #000 !important; white-space: normal !important; }
  .fx-conteudo { overflow: visible !important; padding: 0 !important; }
  .ornament, .page-head::before, .page-head::after, .page-head > *::after { display: none !important; }
}

/* ---------- criador em dois painéis: ficha viva à esquerda, etapas em abas com os catálogos à direita ---------- */
.app { grid-template-columns: minmax(19rem, 25rem) minmax(0, 1fr); }
.app-alterna { display: none; }
.app-abas { display: flex; gap: 0.15rem; padding: 0.35rem 0.8rem 0; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--ouro-linha); }
.app-abas .app-etapa-botao { flex: none; width: auto; display: inline-flex; gap: 0.35rem; padding: 0.45rem 0.7rem; border: 1px solid transparent; border-bottom: 0; border-left: 0; border-top: 2px solid transparent; }
.app-abas .app-etapa-botao.is-current { color: var(--ouro-claro); background: rgba(110, 31, 26, 0.3); border-color: var(--ouro-fio); border-top-color: var(--ouro); }
.app-abas .app-etapa-num { display: none; }
.app-etapa-lista .app-duplo { grid-template-columns: minmax(0, 1fr); }
.ficha-viva { display: grid; gap: 0.9rem; }
.fv-secao .painel-cab, .fv-resumo .painel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0 0.4rem; }
.fv-ir { padding: 0; font: inherit; font-family: var(--f-titulo); font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ouro-claro); background: none; border: 0; cursor: pointer; }
.fv-ir:hover, .fv-ir:focus-visible { color: var(--osso-claro); text-decoration: underline; }
.fv-atributos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; width: 100%; margin-bottom: 0.6rem; padding: 0; font: inherit; background: none; border: 0; cursor: pointer; }
.fv-atr { display: grid; justify-items: center; padding: 0.3rem 0.2rem; background: rgba(14, 13, 12, 0.55); border: 1px solid var(--ouro-fio); }
.fv-atributos:hover .fv-atr { border-color: var(--ouro-linha); }
.fv-atr small { font-family: var(--f-titulo); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--osso-fosco); }
.fv-atr strong { font-family: var(--f-titulo); font-size: 1.05rem; color: var(--osso-claro); }
.fv-armas { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.fv-armas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; padding: 0.35rem 0.5rem; background: rgba(14, 13, 12, 0.45); border: 1px solid var(--ouro-fio); }
.fv-arma-nome { flex: 1 1 auto; font-weight: 700; color: var(--osso-claro); }
.fv-arma-nh { font-family: var(--f-titulo); font-size: 0.9rem; color: var(--ouro-claro); }
.fv-arma-dano { font-size: 0.92rem; color: var(--osso); }
.fv-arma-per { flex-basis: 100%; font-size: 0.85rem; color: var(--osso-fosco); }
.fv-comprar { flex-basis: 100%; text-align: left; font-size: 0.88rem; color: #e0a15e; }
.fv-vazio { margin: 0; font-size: 0.92rem; font-style: italic; color: var(--osso-fosco); }
/* arrastar: a ficha se ilumina para receber */
body.arrastando .app-lado { outline: 2px dashed var(--ouro-linha); outline-offset: -6px; }
.app-lado.recebe { outline: 2px dashed var(--ouro) !important; background: linear-gradient(180deg, rgba(110, 31, 26, 0.35), rgba(14, 13, 12, 0.95)); }
.app-cat-item[draggable="true"] { cursor: grab; }
.app-cat-item[draggable="true"]:active { cursor: grabbing; }

@media (max-width: 899px) {
  /* celular: um seletor Ficha | Montar no topo; cada lado ocupa a tela */
  body.modo-app .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app-alterna { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; padding: 0.4rem 10px; background: #13110f; border-bottom: 1px solid var(--ouro-linha); }
  .app-alterna button { padding: 0.5rem; font-family: var(--f-titulo); font-size: 0.9rem; color: var(--osso); background: rgba(14, 13, 12, 0.6); border: 1px solid var(--ouro-fio); cursor: pointer; }
  .app-alterna button[aria-selected="true"] { color: var(--ouro-claro); background: rgba(110, 31, 26, 0.35); border-color: var(--ouro); }
  .app-alterna button.pulsa { animation: pulsa-ficha 0.6s ease; }
  .app[data-lado="montar"] .app-lado { display: none; }
  .app[data-lado="ficha"] .app-principal { display: none; }
  .app[data-lado="ficha"] .app-lado { display: flex; overflow: auto; padding: 0.7rem 10px 1.5rem; border-bottom: 0; }
  .app[data-lado="ficha"] .app-quem, .app[data-lado="ficha"] .app-salvar { display: grid; }
  .app[data-lado="ficha"] .app-pontos { display: block; }
  .app-abas { padding: 0.3rem 8px 0; scrollbar-width: none; }
  .app-abas::-webkit-scrollbar { display: none; }
  .app-abas .app-etapa-botao { padding: 0.4rem 0.55rem; font-size: 0.9rem; }
}
@keyframes pulsa-ficha { 0% { box-shadow: 0 0 0 0 rgba(201, 171, 107, 0.7); } 100% { box-shadow: 0 0 0 10px rgba(201, 171, 107, 0); } }
@media (prefers-reduced-motion: reduce) { .app-alterna button.pulsa { animation: none; } }
/* retrato do personagem */
.retrato { flex: none; width: 5.5rem; height: 5.5rem; background: rgba(14, 13, 12, 0.6) center / cover no-repeat; border: 1px solid var(--ouro-linha); border-radius: 50%; }
.retrato.vazio { background-image: none; }
.retrato-campo { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
.retrato-campo .field-hint { margin: 0.3rem 0 0; }
.fx-retrato { flex: none; width: 2.6rem; height: 2.6rem; background: center / cover no-repeat; border: 1px solid var(--ouro-linha); border-radius: 50%; }
.brasao.com-retrato { background: center / cover no-repeat; }
.brasao.com-retrato > * { display: none; }
/* ficha: situações ligáveis, faixa do que está valendo, carga, força, local e usos dos itens */
.fx-ligadas { position: sticky; top: -1rem; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: -0.2rem 0 0.8rem; padding: 0.45rem 0.6rem; background: #2a1814; border: 1px solid var(--brasa); }
.fx-ligadas[hidden] { display: none; }
.fx-ligadas-rotulo { font-family: var(--f-titulo); font-size: 0.75rem; letter-spacing: 0.06em; color: #e0a15e; }
.fx-ligada { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.2rem 0.1rem 0.55rem; font-size: 0.9rem; color: var(--osso-claro); background: rgba(194, 86, 43, 0.25); border: 1px solid rgba(194, 86, 43, 0.6); border-radius: 999px; }
.fx-ligada button { width: 1.4rem; height: 1.4rem; padding: 0; font-size: 1rem; line-height: 1; color: var(--osso-claro); background: none; border: 0; cursor: pointer; }
.fx-sit-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.4rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.fx-sit { display: flex; align-items: flex-start; gap: 0.55rem; height: 100%; padding: 0.45rem 0.6rem; background: rgba(14, 13, 12, 0.45); border: 1px solid var(--ouro-fio); cursor: pointer; }
.fx-sit:has(input:checked) { background: rgba(194, 86, 43, 0.18); border-color: var(--brasa); }
.fx-sit input { margin-top: 0.3rem; accent-color: var(--brasa); }
.fx-sit strong { display: block; font-size: 0.95rem; color: var(--osso-claro); }
.fx-sit-cond { display: block; font-size: 0.88rem; color: #c4b89f; }
.fx-atual td { color: var(--ouro-claro); font-weight: 700; background: rgba(110, 31, 26, 0.25); }
.fx-forca { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 0.3rem 1rem; margin: 0.7rem 0 0; padding: 0; list-style: none; font-size: 0.93rem; }
.fx-forca li { display: flex; justify-content: space-between; gap: 0.5rem; border-bottom: 1px solid var(--ouro-fio); }
.fx-usos { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.fx-usos .btn-link { width: 1.6rem; font-size: 1.05rem; text-decoration: none; border: 1px solid var(--ouro-fio); }
.fx-usos .btn-link:disabled { opacity: 0.35; cursor: default; }
.fx-local { max-width: 11rem; padding: 0.15rem 0.3rem; font-family: var(--f-corpo); font-size: 0.88rem; color: var(--osso-claro); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--ouro-linha); }
.fx-local option { background: var(--pedra); }
.fx-dentro { margin-right: 0.2rem; color: var(--osso-fosco); }
.app-item.item-guardado { opacity: 0.6; }
@media print { .fx-ligadas, .fx-local, .fx-usos .btn-link { display: none !important; } }
/* boneco: o corpo com a proteção e os lugares (mãos, cinto, costas) em volta */
.boneco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, 11rem) minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.boneco-lado { display: grid; gap: 0.6rem; }
.boneco-meio { display: grid; justify-items: center; gap: 0.3rem; }
.boneco-corpo { width: 100%; max-width: 11rem; height: auto; }
.boneco-vestido { margin: 0; font-size: 0.82rem; text-align: center; color: #c4b89f; }
.boneco-lugar { display: grid; gap: 0.3rem; padding: 0.45rem 0.55rem; background: rgba(14, 13, 12, 0.5); border: 1px solid var(--ouro-fio); }
.boneco-lugar-nome { font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a39780; }
.boneco-lugar ul { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.boneco-lugar li { display: flex; align-items: center; gap: 0.3rem; min-width: 0; font-size: 0.92rem; }
.boneco-lugar li .app-item-nome-btn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.boneco-vazio { font-style: italic; color: var(--osso-fosco); }
.boneco-tira { flex: none; width: 1.4rem; height: 1.4rem; padding: 0; font-size: 1rem; line-height: 1; color: var(--osso-fosco); background: none; border: 1px solid var(--ouro-fio); cursor: pointer; }
.boneco-tira:hover { color: var(--osso-claro); border-color: var(--ouro); }
.boneco-por { width: 100%; padding: 0.15rem 0.3rem; font-family: var(--f-corpo); font-size: 0.85rem; color: var(--osso-claro); background: rgba(0, 0, 0, 0.4); border: 1px solid var(--ouro-linha); }
.boneco-por option { background: var(--pedra); }
.fx-sacar { display: block; font-size: 0.8rem; font-style: italic; color: #e0a15e; }
/* na ficha viva do criador (coluna estreita): o corpo menor e os lugares em duas colunas embaixo */
.fv-boneco .boneco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fv-boneco .boneco-meio { grid-column: 1 / -1; grid-row: 1; }
.fv-boneco .boneco-corpo { max-width: 7.5rem; }
@media (max-width: 599px) {
  .boneco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .boneco-meio { grid-column: 1 / -1; grid-row: 1; }
  .boneco-corpo { max-width: 13rem; }
}
@media print { .boneco-por, .boneco-tira { display: none !important; } }
/* boneco desenhado: corpo, roupas por material e o que ele leva */
.boneco-corpo { overflow: visible; }
.boneco-pele path { fill: #3a302a; stroke: #b3a58a; stroke-width: 1.2; stroke-linejoin: round; }
.boneco-camada { stroke: rgba(0, 0, 0, 0.55); stroke-width: 1; stroke-linejoin: round; }
.boneco-elmo, .boneco-viseira { stroke: #c9ccd0; }
.boneco-fenda { stroke: #0e0d0c; stroke-width: 2.5; stroke-linecap: round; }
.bn-malha-fundo { fill: #4d5156; } .bn-malha-anel { fill: none; stroke: #a9aeb4; stroke-width: 0.7; }
.bn-placas-fundo { fill: #8b9096; } .bn-placas-junta { stroke: #3f4246; stroke-width: 1; } .bn-placas-rebite { fill: #d3d6d9; }
.bn-couro-fundo { fill: #6a4a30; } .bn-couro-ponto { stroke: #c79a62; stroke-width: 0.6; }
.bn-tecido-fundo { fill: #5a4636; } .bn-tecido-fio { stroke: #735c48; stroke-width: 0.6; }
.boneco-metal { fill: #b7bcc2; stroke: #3f4246; stroke-width: 0.8; }
.boneco-fio { stroke: #eef0f2; stroke-width: 0.7; opacity: 0.7; }
.boneco-madeira { fill: #7a5634; stroke: #2e1f12; stroke-width: 0.8; }
.boneco-couro { fill: #5e3f28; stroke: #22160c; stroke-width: 0.8; }
.boneco-arco { fill: none; stroke: #8a6238; stroke-width: 3.2; stroke-linecap: round; }
.boneco-corda { stroke: #e8dcc0; stroke-width: 0.7; }
.boneco-escudo { stroke: #2e1f12; stroke-width: 1.2; }
.boneco-escudo-face { fill: #6e1f1a; stroke: #c9ab6b; stroke-width: 1.2; }
.boneco-fogo { fill: #e0822e; stroke: #f4c46a; stroke-width: 0.8; }
.boneco-costura { fill: none; stroke: #c79a62; stroke-width: 0.8; stroke-dasharray: 2 2; }
.boneco-haste-flecha { stroke: #9b7a52; stroke-width: 1; }
.boneco-pena { fill: #d9ccb0; stroke: #6e1f1a; stroke-width: 0.5; }
.boneco-mochila { fill: #4e3522; }
.boneco-rolo { fill: #6b5a45; stroke: #22160c; stroke-width: 0.8; }
.boneco-alcas path { fill: none; stroke: #4a3120; stroke-width: 5; stroke-linecap: round; }
.boneco-cinto { stroke-width: 0.8; }
.boneco-dedos { fill: #3a302a; stroke: #b3a58a; stroke-width: 1; }
.boneco-dedos.com-luva { fill: #6a4a30; stroke: #22160c; }
.boneco-fundo-icone { fill: #1a1612; stroke: var(--ouro-linha); stroke-width: 1; }
.boneco-item .icone { color: var(--ouro-claro); }
.boneco-item:hover > *, .boneco-roupa:hover > * { filter: brightness(1.2); }
@media print { .boneco-pele path { fill: #fff !important; stroke: #000 !important; } }
/* modo Jogando: tudo numa tela, estilo interface de MMO */
.fx-jogar { flex: none; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.fx-jogar[aria-pressed="true"] { background: var(--pedra-alta); border-color: var(--ouro); color: var(--ouro-claro); }
@media (min-width: 900px) {
  body.modo-jogando .fx-corpo { grid-template-columns: minmax(0, 1fr); }
  body.modo-jogando .fx-nav { display: none; }
}
body.modo-jogando .fx-conteudo > .lede { display: none; }
.jg { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) minmax(16rem, 21rem); grid-template-areas: "esq meio dir" "inv inv dir"; gap: 0.9rem; align-items: start; }
.jg-esq { grid-area: esq; } .jg-meio { grid-area: meio; } .jg-dir { grid-area: dir; } .jg-inventario { grid-area: inv; }
.jg-col { display: grid; gap: 0.8rem; min-width: 0; }
.jg-painel, .jg-inventario { padding: 0.6rem 0.7rem; background: rgba(14, 13, 12, 0.55); border: 1px solid var(--ouro-fio); }
.jg h3 { margin: 0 0 0.45rem; font-family: var(--f-titulo); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a39780; }
.jg-quem { display: flex; align-items: center; gap: 0.7rem; }
.jg-retrato { display: grid; place-items: center; flex: none; width: 4.2rem; height: 4.2rem; font-family: var(--f-titulo); font-size: 1.8rem; color: var(--ouro-claro); background: #2a2420 center / cover no-repeat; border: 2px solid var(--ouro); border-radius: 50%; box-shadow: 0 0 0 3px rgba(110, 31, 26, 0.5); }
.jg-quem strong { display: block; font-family: var(--f-titulo); font-size: 1.1rem; color: var(--osso-claro); }
.jg-quem span { font-size: 0.88rem; color: #c4b89f; }
.jg-sit { display: flex; align-items: baseline; gap: 0.4rem; width: 100%; margin: 0 0 0.3rem; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.9rem; text-align: left; color: var(--osso); background: rgba(0, 0, 0, 0.3); border: 1px solid var(--ouro-fio); cursor: pointer; }
.jg-sit strong { min-width: 2rem; color: var(--ouro-claro); }
.jg-sit.ligada { color: var(--osso-claro); background: rgba(194, 86, 43, 0.25); border-color: var(--brasa); }
.jg-figura { justify-self: center; width: 100%; max-width: 17rem; }
.jg-clicavel { cursor: pointer; }
.jg-clicavel:hover > * { filter: brightness(1.35) drop-shadow(0 0 3px rgba(224, 162, 94, 0.8)); }
.jg-barra { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 0.5rem; }
.jg-arma { display: grid; gap: 0.35rem; padding: 0.5rem; background: linear-gradient(180deg, rgba(42, 38, 34, 0.9), rgba(20, 18, 16, 0.9)); border: 1px solid var(--ouro-linha); border-top: 2px solid var(--ouro); }
.jg-arma.guardada { border-top-color: var(--ouro-escuro); opacity: 0.85; }
.jg-arma.natural { border-top-color: var(--ouro-fio); }
.jg-arma-cab { display: flex; align-items: center; gap: 0.4rem; font-family: var(--f-titulo); font-size: 0.85rem; color: var(--osso-claro); }
.jg-arma-icone { width: 1.3rem; height: 1.3rem; color: var(--ouro-claro); }
.jg-arma-acoes { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.jg-acao { flex: 1 1 auto; padding: 0.35rem 0.4rem; font-family: var(--f-titulo); font-size: 0.78rem; color: var(--osso-claro); background: rgba(110, 31, 26, 0.35); border: 1px solid rgba(194, 86, 43, 0.6); cursor: pointer; }
.jg-acao:hover, .jg-acao:focus-visible { background: rgba(194, 86, 43, 0.45); }
.jg-acao.jg-dano { background: rgba(0, 0, 0, 0.4); border-color: var(--ouro-linha); }
.jg-defesas, .jg-atributos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.jg-defesa, .jg-atr { display: grid; justify-items: center; gap: 0.1rem; padding: 0.45rem 0.3rem; font: inherit; color: var(--osso); background: rgba(14, 13, 12, 0.6); border: 1px solid var(--ouro-linha); cursor: pointer; }
.jg-defesa span, .jg-atr span { font-family: var(--f-titulo); font-size: 0.7rem; letter-spacing: 0.08em; color: #a39780; }
.jg-defesa strong, .jg-atr strong { font-family: var(--f-titulo); font-size: 1.35rem; color: var(--osso-claro); }
.jg-defesa:hover, .jg-atr:hover, .jg-pericia:hover { border-color: var(--ouro); background: rgba(110, 31, 26, 0.3); }
.jg-lista { display: grid; gap: 0.2rem; max-height: 22rem; overflow: auto; }
.jg-pericia { display: flex; align-items: center; gap: 0.45rem; width: 100%; padding: 0.3rem 0.45rem; font: inherit; font-size: 0.93rem; text-align: left; color: var(--osso); background: rgba(0, 0, 0, 0.25); border: 1px solid transparent; cursor: pointer; }
.jg-pericia span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jg-pericia strong { font-family: var(--f-titulo); color: var(--ouro-claro); }
.jg-pericia[hidden] { display: none; }
.jg-slots { display: grid; grid-template-columns: repeat(auto-fill, 4.4rem); gap: 0.35rem; }
.jg-slot { position: relative; display: grid; place-items: center; width: 4.4rem; height: 4.4rem; padding: 0.3rem; font: inherit; color: var(--osso); background: radial-gradient(circle at 50% 40%, rgba(60, 52, 44, 0.9), rgba(16, 14, 12, 0.95)); border: 1px solid var(--ouro-linha); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); cursor: pointer; }
.jg-slot:hover { border-color: var(--ouro); }
.jg-slot-icone { width: 1.8rem; height: 1.8rem; color: var(--ouro-claro); }
.jg-slot-nome { position: absolute; left: 2px; right: 2px; bottom: 2px; overflow: hidden; font-size: 0.62rem; line-height: 1.1; text-align: center; color: #c4b89f; text-overflow: ellipsis; white-space: nowrap; }
.jg-slot-qtd { position: absolute; top: 2px; right: 4px; font-family: var(--f-titulo); font-size: 0.8rem; color: var(--osso-claro); text-shadow: 0 0 3px #000; }
.jg-slot-qtd.acabou { color: #e08a5e; }
.jg-slot-vazio { cursor: default; opacity: 0.4; }
.rolagens.embutido { position: static; width: auto; max-height: 24rem; box-shadow: none; }
@media (max-width: 1099px) {
  .jg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "esq esq" "meio meio" "dir dir" "inv inv"; }
}
@media (max-width: 599px) {
  .jg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "esq" "meio" "dir" "inv"; }
  .jg-figura { max-width: 13rem; }
  .fx-jogar { padding: 0.35rem 0.55rem; font-size: 0.75rem; }
  .jg-slots { grid-template-columns: repeat(auto-fill, 4rem); }
  .jg-slot { width: 4rem; height: 4rem; }
}
@media print { .fx-jogar, .fx-jogando { display: none !important; } }
/* simulação no Jogando: tempo e corpo, saúde, inventário em grade, receitas */
.jg-sim select, .jg-ferir select { padding: 0.2rem 0.3rem; font-family: var(--f-corpo); font-size: 0.88rem; color: var(--osso-claro); background: rgba(0, 0, 0, 0.45); border: 1px solid var(--ouro-linha); }
.jg-sim select option, .jg-ferir select option { background: var(--pedra); }
.jg-relogio { margin: 0; font-family: var(--f-titulo); font-size: 0.95rem; color: var(--osso-claro); }
.jg-clima { margin: 0.1rem 0 0.4rem; font-size: 0.88rem; color: #c4b89f; }
.jg-lugar { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.jg-lugar select { flex: 1 1 8rem; min-width: 0; }
.jg-barra-sim { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 3.6rem; align-items: center; gap: 0.4rem; margin: 0.2rem 0; font-size: 0.85rem; }
.jg-barra-rotulo { font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.06em; color: #a39780; }
.jg-barra-trilho { position: relative; height: 0.55rem; overflow: hidden; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--ouro-fio); }
.jg-barra-cheio { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--ouro-escuro), var(--ouro)); }
.jg-barra-sim.ruim .jg-barra-cheio { background: linear-gradient(90deg, #6e1f1a, #e08a5e); }
.jg-barra-valor { font-size: 0.8rem; text-align: right; color: var(--osso-claro); }
.jg-condicoes { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.4rem 0; padding: 0; list-style: none; font-size: 0.8rem; }
.jg-condicoes li { padding: 0.1rem 0.45rem; color: #f0c7a8; background: rgba(194, 86, 43, 0.2); border: 1px solid rgba(194, 86, 43, 0.5); border-radius: 999px; }
.jg-aviso { margin: 0.4rem 0; padding: 0.35rem 0.5rem; font-size: 0.88rem; color: var(--osso-claro); background: rgba(110, 31, 26, 0.35); border-left: 3px solid var(--brasa); }
.jg-passa { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.jg-passa select { flex: 1 1 100%; }
.jg-ferimento { display: grid; gap: 0.2rem; margin: 0 0 0.45rem; padding: 0.4rem 0.5rem; background: rgba(0, 0, 0, 0.3); border-left: 3px solid #b88a4a; }
.jg-ferimento.grav-2 { border-left-color: #d0703a; } .jg-ferimento.grav-3 { border-left-color: #c0392b; }
.jg-ferimento strong { font-size: 0.93rem; color: var(--osso-claro); }
.jg-ferimento span { font-size: 0.83rem; color: #c4b89f; }
.jg-acao:disabled { opacity: 0.45; cursor: default; }
.jg-ferir { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.jg-ferir select { flex: 1 1 6rem; min-width: 0; }
.boneco-pele path[data-parte] { cursor: pointer; }
.boneco-pele path[data-parte]:hover { stroke: var(--ouro-claro); stroke-width: 2; }
.boneco-pele path.ferido-1 { fill: #6a3a2c; } .boneco-pele path.ferido-2 { fill: #8a3526; } .boneco-pele path.ferido-3 { fill: #a8261c; }
.boneco-pele path.escolhida { stroke: var(--ouro-claro); stroke-width: 2.5; }
.jg-inv-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.jg-inv-cab h3 { margin: 0; }
.jg-grades { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.5rem; }
.jg-grade-caixa { display: grid; gap: 0.3rem; align-content: start; }
.jg-grade-titulo { font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.06em; color: #a39780; }
.jg-grade { display: grid; justify-self: start; width: max-content; gap: 2px; padding: 3px; background-color: rgba(0, 0, 0, 0.45); background-image: linear-gradient(rgba(168, 136, 74, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 136, 74, 0.12) 1px, transparent 1px); background-size: calc(2.6rem + 2px) calc(2.6rem + 2px); background-position: 3px 3px; border: 1px solid var(--ouro-linha); }
.jg-peca { position: relative; display: grid; place-items: center; padding: 0; font: inherit; background: radial-gradient(circle at 50% 40%, rgba(70, 60, 50, 0.95), rgba(26, 22, 18, 0.95)); border: 1px solid var(--ouro-linha); cursor: pointer; }
.jg-peca:hover { border-color: var(--ouro); }
.jg-condicao { position: absolute; left: 2px; bottom: 2px; height: 3px; max-width: calc(100% - 4px); background: #a9c47f; }
.jg-condicao.ruim { background: #e08a5e; }
.jg-nao-cabe { margin: 0; font-size: 0.8rem; color: #e08a5e; }
.jg-arma.quebrada { opacity: 0.6; border-top-color: #6e1f1a; }
.fx-ligada.auto { padding-right: 0.55rem; background: rgba(110, 31, 26, 0.35); border-style: dashed; }
#jg-receitas h2 { margin: 0 0 0.4rem; color: var(--ouro-claro); }
.jg-receita { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.6rem; align-items: center; margin: 0 0 0.5rem; padding: 0.5rem 0.6rem; background: rgba(0, 0, 0, 0.3); border: 1px solid var(--ouro-fio); }
.jg-receita strong { color: var(--osso-claro); }
.jg-receita span { grid-column: 1; font-size: 0.85rem; color: #c4b89f; }
.jg-receita .btn { grid-column: 2; grid-row: 1 / span 3; }
.jg-receita.falta { opacity: 0.75; }
.jg-falta { color: #e08a5e !important; }
.jg-nos-bracos { display: flex; flex-wrap: wrap; gap: 3px; }
.jg-solto { width: 2.6rem; height: 2.6rem; border-color: #6e1f1a; }
.jg-arma-cond { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: #c4b89f; }
/* sistema de regras da ficha */
.selo-sistema { justify-self: start; padding: 0.05rem 0.45rem; font-family: var(--f-titulo); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ouro-claro); border: 1px solid var(--ouro-linha); border-radius: 999px; }
.selo-sistema:empty { display: none; }
/* bloqueado na criação: existe no mundo, só se ganha em jogo */
.pericia.st-bloqueado, .item-card.st-bloqueado { border-left-color: #7a5fa0; }
.st-bloqueado .pericia-status, .pericia-status.st-bloqueado, .st-bloqueado .item-card-status { color: #b49bd6; }
.item-dialogo.st-bloqueado { border-top-color: #7a5fa0; }
.marca-bloqueado { margin-left: 0.3rem; font-size: 0.8rem; color: #b49bd6; }
.app-item.st-bloqueado { border-left-color: #7a5fa0; }