/* onboarding.css — Criação de personagem e mini tutorial.
   Carregado depois de styles.css; reaproveita .swatch, .field, .btn e as variáveis do tema. */

/* ---------- Criação de personagem ---------- */
.create-character {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow: auto;
  background: var(--bg);
  color: var(--text);
}

.cc-box {
  width: min(720px, 100%);
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.cc-head h1 { margin: 0 0 .25rem; }
.cc-head p { margin: 0; }

.cc-stage { display: grid; place-items: center; }
.sprite-xl { width: 240px; height: 240px; }

.cc-controls { display: grid; gap: .9rem; }

.cc-row { display: flex; gap: .5rem; flex-wrap: wrap; }

.cc-sex {
  flex: 1 1 120px;
  padding: .7rem 1rem;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.cc-sex.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); }

.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: .5rem; max-height: 280px; overflow: auto; }

.cc-opt {
  display: grid;
  justify-items: center;
  gap: .2rem;
  padding: .4rem;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}
.cc-opt.is-active { border-color: var(--accent); }
.cc-thumb { width: 56px; height: 56px; display: block; }
.cc-thumb-body { width: 64px; height: 64px; display: block; }
.cc-opt-body { min-width: 72px; }
.cc-color-free { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.cc-color-free input { width: 32px; height: 32px; padding: 0; border: 2px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
.cc-actions { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; }
.cc-box .swatches + .cc-grid { margin-top: .5rem; }

.cc-box .form-error:empty { display: none; }   /* sem erro, sem barra vermelha */

.cc-box .swatches { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }

/* ---------- Editor visual do admin (docs/archive/ARTE-V2-SPEC.md 8) ---------- */
.visual-editor {
  position: fixed; inset: 0; z-index: 900; overflow: auto; padding: 1rem;
  background: var(--bg); color: var(--text); display: grid; place-items: start center;
}
.ve-box { width: min(1100px, 100%); display: grid; gap: 1rem; padding: 1.25rem; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); }
.ve-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ve-head h1 { margin: 0; flex: 1 1 auto; }
.ve-body { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 380px); gap: 1.25rem; align-items: start; }
.ve-stage { display: grid; place-items: center; border-radius: var(--r-md); background:
  repeating-conic-gradient(color-mix(in srgb, var(--line) 55%, transparent) 0 25%, transparent 0 50%) 0 0 / 24px 24px; }
.ve-stage canvas { width: 100%; max-width: 520px; height: auto; touch-action: none; cursor: grab; }
.ve-side { display: grid; gap: .75rem; }
.ve-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: end; }
.ve-row label { display: grid; gap: .2rem; font-size: var(--fs-sm); }
.ve-check { display: flex !important; align-items: center; gap: .35rem; }
.ve-fields { display: grid; gap: .5rem; }
.ve-field { display: grid; grid-template-columns: 90px 1fr 80px; gap: .5rem; align-items: center; font-size: var(--fs-sm); }
.ve-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.ve-history { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: var(--fs-sm); }
.ve-history li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
@media (max-width: 760px) { .ve-body { grid-template-columns: 1fr; } }

/* ---------- Tutorial ---------- */
.tutorial {
  position: fixed;
  inset: 0;
  z-index: 950;
  /* O overlay é uma CAMADA DE LEITURA, não um modal: o clique tem que chegar ao
     elemento destacado. Só o cartão recebe ponteiro. */
  pointer-events: none;
}

.tutorial::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 62%);
}

.tut-hole {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 55%), 0 0 0 3px var(--accent);
  pointer-events: none;
  transition: all .18s ease;
}
.tutorial:has(.tut-hole:not([hidden]))::before { display: none; }

.tut-card {
  position: fixed;
  pointer-events: auto;
  max-width: min(320px, calc(100vw - 24px));
  display: grid;
  gap: .6rem;
  padding: .9rem 1rem;
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.tut-card.is-centered { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.tut-text { margin: 0; font-size: var(--fs-md); color: var(--text); }
.tut-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.tut-count { margin: 0; font-size: var(--fs-xs); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .tut-hole { transition: none; }
}

/* Editor visual: conferência de todos os itens do tipo (docs/archive/ARTE-V2-SPEC.md 8.1). */
.ve-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ve-check-grid:empty { display: none; }
.ve-check-grid figure { margin: 0; text-align: center; }
.ve-check-grid canvas { width: 100%; height: auto; background: var(--surface-2); border-radius: var(--r-sm); }
.ve-check-grid figcaption { font-size: .72rem; color: var(--muted); }
.visual-editor .ve-box { max-height: 100%; overflow: auto; }
/* Editor visual, aba Monstros (docs/archive/AJUSTES-POS-ARTE-SPEC.md 6.2): a prévia é o palco da luta. */
.ve-monster { width: 100%; max-width: 560px; padding: .75rem; }
.ve-monster .stage { min-height: 260px; }