@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Noto+Sans:wght@400;600&display=swap');

/* Paleta inspirada em pergaminho + couro (referência: layout do site de encerramento do RO BR) */
:root {
  --parchment: #f1e5dd;
  --parchment-2: #e6d7b3;
  --parchment-3: #f9eccf;
  --ink: #3c2f23;
  --ink-soft: #626262;
  --leather: #38230d;
  --leather-2: #2b2512;
  --copper: #ab673e;
  --copper-dark: #7c3712;
  --gold: #e8a030;
  --gold-soft: #ffe5c6;
  --danger: #a3271c;
  --ok: #2f6b2a;
  --radius: 6px;
  --shadow: 0 10px 30px rgba(20, 12, 4, .35);
}

* { box-sizing: border-box; }

/* a rolagem das âncoras é animada em js/common.js (mais lenta e com desaceleração) */
html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: 'Noto Sans', system-ui, sans-serif;
  color: var(--ink);
  background: var(--leather-2) radial-gradient(circle at 50% 0, #4a3f35 0, var(--leather-2) 70%) fixed;
  line-height: 1.6;
}

h1, h2, h3, .brand { font-family: 'Cinzel', serif; letter-spacing: .02em; }

a { color: var(--copper-dark); }

img { max-width: 100%; display: block; }

/* ---------- Topo ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 48px);
  background: rgba(43, 37, 18, .92);
  border-bottom: 2px solid var(--copper-dark);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold-soft); text-decoration: none; font-weight: 900; font-size: 1.25rem; white-space: nowrap; }
@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; justify-content: center; padding: 8px 16px; }
  .topbar nav { justify-content: center; gap: 8px; }
  .topbar nav .btn-sm { padding: 6px 10px; font-size: .78rem; }
}
.brand img.brand-logo { width: auto; height: 54px; margin: -6px 0; }
@media (max-width: 560px) { .brand img.brand-logo { height: 40px; margin: -4px 0; } }
.topbar nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(78vh, 720px);
  display: grid; place-items: center; text-align: center;
  padding: 80px 16px 120px;
  background: url('../img/banner.jpg') center 30% / cover no-repeat;
  color: #fff;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20, 12, 4, .25) 0%, rgba(20, 12, 4, .55) 60%, var(--leather-2) 100%);
}
/* página interna: faixa dos personagens da arte, sem o logo */
.hero.compact {
  min-height: 300px; padding: 60px 16px 100px;
  background-image: url('../img/banner-strip.jpg'); background-position: center 70%;
}
.hero.compact::before {
  background: linear-gradient(180deg, rgba(20, 12, 4, .05) 0%, rgba(20, 12, 4, .25) 55%, var(--leather-2) 100%);
}

/* página inicial: arte inteira, com o logo, bem visível */
.banner {
  position: relative;
  /* proporção da arte (3168x1344 = 42.4vw de altura), com limites */
  height: clamp(260px, 42.4vw, 88vh);
  background: url('../img/banner.jpg') center 42% / cover no-repeat;
}
.banner::after { /* só funde a base com a página */
  content: ''; position: absolute; inset: auto 0 0; height: 18%;
  background: linear-gradient(180deg, transparent, var(--leather-2));
}
.banner-cta { position: relative; text-align: center; padding: 8px 16px 0; color: #fff; }
.banner-cta .tagline { margin: 0 auto 18px; max-width: 640px; font-size: 1.15rem; color: var(--parchment-2); }
main.after-banner { margin-top: 48px; }
.hero > * { position: relative; }
.hero h1 {
  margin: 0;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 900;
  color: var(--gold-soft);
  text-shadow: 0 3px 0 var(--copper-dark), 0 8px 24px rgba(0, 0, 0, .7);
}
.hero p.tagline { margin: 8px auto 24px; max-width: 640px; font-size: 1.15rem; text-shadow: 0 2px 8px #000; }

.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(43, 37, 18, .8); border: 1px solid var(--gold);
  color: var(--gold-soft); font-weight: 600; font-size: .95rem;
}
.badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #7bd36b; box-shadow: 0 0 8px #7bd36b; }
.badge .dot.off { background: #c45; box-shadow: 0 0 8px #c45; }

/* ---------- Botões ---------- */
.btn {
  display: inline-block; cursor: pointer;
  padding: 12px 26px; border-radius: var(--radius);
  font: 700 1rem 'Cinzel', serif; letter-spacing: .04em; text-decoration: none;
  color: var(--gold-soft);
  background: linear-gradient(180deg, var(--copper) 0%, var(--copper-dark) 100%);
  border: 1px solid #5a2a0e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #4a1f08, 0 8px 16px rgba(0, 0, 0, .35);
  transition: transform .08s, filter .15s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 0 #4a1f08; }
/* borda dupla: 2 px mais escuros por fora e um fio claro por dentro; o padding compensa a borda */
.btn.ghost { padding: 11px 25px; background: rgba(43, 37, 18, .65); border: 2px solid var(--copper-dark); box-shadow: inset 0 0 0 1px rgba(255, 229, 198, .4); }
/* mesmo formato do .btn principal, só muda a cor */
.btn.alt {
  background: linear-gradient(180deg, #4f6f8f 0%, #2d4258 100%);
  border-color: #1c2a38;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #16212c, 0 8px 16px rgba(0, 0, 0, .35);
}
.btn.alt:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 2px 0 #16212c; }
/* versão compacta (barra do topo) */
.btn-sm { padding: 7px 16px; font-size: .85rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 0 #4a1f08, 0 5px 10px rgba(0, 0, 0, .3); }
.btn-sm.alt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 0 #16212c, 0 5px 10px rgba(0, 0, 0, .3); }
/* página atual: botão "pressionado" com contorno dourado */
.btn.current { transform: translateY(2px); filter: brightness(1.12); outline: 2px solid var(--gold); outline-offset: 1px; }
.btn-sm.current { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 #4a1f08; }
.btn-sm.alt.current { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 #16212c; }
.btn[disabled] { opacity: .6; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- Pergaminho com moldura ---------- */
main { position: relative; margin-top: -80px; padding: 0 16px 64px; }

.scroll {
  position: relative;
  max-width: 1040px; margin: 0 auto 36px;
  padding: clamp(24px, 5vw, 56px);
  background: linear-gradient(180deg, var(--parchment-3), var(--parchment) 18%, var(--parchment) 82%, var(--parchment-2));
  border: 2px solid var(--copper);
  outline: 1px solid var(--parchment-2); outline-offset: -10px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* cantos ornamentais */
.scroll::before, .scroll::after {
  content: ''; position: absolute; width: 18px; height: 18px;
  background: var(--copper); transform: rotate(45deg);
  border: 2px solid var(--parchment-3);
}
.scroll::before { top: -10px; left: calc(50% - 9px); }
.scroll::after { bottom: -10px; left: calc(50% - 9px); }

.section-title { text-align: center; margin: 0 0 8px; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--leather); }
.section-title + .lead { text-align: center; margin: 0 auto 32px; max-width: 640px; color: var(--ink-soft); }
.divider { display: flex; align-items: center; gap: 12px; margin: 0 auto 28px; max-width: 320px; color: var(--copper); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: currentColor; }

/* ---------- Passos ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; counter-reset: step; }
.step {
  position: relative; padding: 24px 20px 20px;
  background: rgba(255, 253, 249, .55); border: 1px solid var(--parchment-2); border-radius: var(--radius);
}
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: -16px; left: 20px;
  width: 32px; height: 32px; display: grid; place-items: center;
  font: 700 1rem 'Cinzel', serif; color: var(--gold-soft);
  background: var(--copper-dark); border-radius: 50%; border: 2px solid var(--parchment-3);
}
.step h3 { margin: 4px 0 6px; color: var(--leather); font-size: 1.1rem; }
.step p { margin: 0; font-size: .95rem; }
code, .kbd {
  font-family: ui-monospace, Consolas, monospace; font-size: .9em; overflow-wrap: anywhere;
  background: var(--parchment-2); padding: 1px 6px; border-radius: 4px; color: var(--leather);
}

/* ---------- Vocações ---------- */
/* largura fixa: os cartões da página inicial e da seleção ficam do mesmo tamanho */
.vocations { --voc-w: 140px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.vocations > * { width: var(--voc-w); flex: 0 0 auto; }
@media (max-width: 480px) { .vocations { --voc-w: 130px; gap: 12px; } }
.voc {
  display: block; position: relative; overflow: hidden; border-radius: var(--radius); margin: 0;
  border: 2px solid var(--copper); background: var(--leather-2);
  aspect-ratio: 179 / 300; box-shadow: 0 6px 14px rgba(20, 12, 4, .3);
}
.voc img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .3s; }
.voc:hover img { transform: scale(1.05); }.voc span {
  position: absolute; inset: auto 0 0; padding: 26px 8px 10px; text-align: center;
  font: 700 1.05rem 'Cinzel', serif; color: var(--gold-soft);
  background: linear-gradient(180deg, transparent, rgba(20, 12, 4, .9));
}

/* ---------- Formulários ---------- */
.panel { max-width: 460px; margin: 0 auto; }
.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 2px solid var(--parchment-2); }
.tabs button {
  flex: 1; padding: 10px; cursor: pointer; background: none; border: 0;
  font: 700 1rem 'Cinzel', serif; color: var(--ink-soft);
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabs button.active { color: var(--copper-dark); border-bottom-color: var(--copper); }

form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; color: var(--leather); }
input[type=text], input[type=email], input[type=password], select, textarea {
  width: 100%; padding: 10px 12px; font: inherit; color: var(--ink);
  background: #fffdf9; border: 1px solid #c9b48f; border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--copper); outline-offset: 1px; border-color: var(--copper); }
textarea { resize: vertical; }
.hint { font-weight: 400; font-size: .82rem; color: var(--ink-soft); }

.alert { padding: 10px 14px; border-radius: var(--radius); font-size: .95rem; }
.alert.error { background: #f6d9d3; color: var(--danger); border: 1px solid #e3a99e; }
.alert.success { background: #dcebd5; color: var(--ok); border: 1px solid #a9cd9c; }
.alert.info { background: #f9eccf; color: var(--leather); border: 1px solid var(--gold); border-left: 4px solid var(--copper); }
.alert.info b { display: block; font-family: 'Cinzel', serif; color: var(--copper-dark); }
.alert.info p { margin: 8px 0 0; }
.alert:empty { display: none; }

/* escolha de vocação / sexo */
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; font-size: .92rem; color: var(--leather); margin-bottom: 6px; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .card {
  display: block; overflow: hidden; border-radius: var(--radius);
  border: 2px solid var(--parchment-2); background: var(--leather-2); transition: border-color .15s, transform .15s;
}
.choice .card b { display: block; padding: 6px 4px; text-align: center; font: 700 .85rem 'Cinzel', serif; color: var(--gold-soft); }
.choice input:checked + .card { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 0 0 2px var(--copper); }
.choice input:focus-visible + .card,
.choice input:focus-visible + .voc { outline: 2px solid var(--copper); outline-offset: 2px; }

/* cartões de vocação clicáveis: mesmo .voc da página inicial */
.choice .voc { transition: transform .15s, box-shadow .15s; }
.choice .voc img { filter: saturate(.55) brightness(.8); }
.choice:hover .voc img { filter: none; }
button.voc { padding: 0; cursor: pointer; font: inherit; text-align: inherit; }
button.voc img { filter: saturate(.8); }
button.voc[aria-pressed="true"] img, button.voc:hover img { filter: none; }
button.voc:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
button.voc[aria-pressed="true"] { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 0 0 3px var(--copper), 0 10px 20px rgba(20, 12, 4, .4); }
.voc-hint { text-align: center; margin: 16px 0 0; }
#home-voc-info { margin-bottom: 8px; }
.choice input:checked + .voc { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 0 0 3px var(--copper), 0 10px 20px rgba(20, 12, 4, .4); }
.choice input:checked + .voc img { filter: none; }

/* painel de atributos da vocação */
.voc-info {
  margin: 24px 0; padding: 20px clamp(16px, 3vw, 28px);
  background: rgba(255, 253, 249, .6); border: 1px solid var(--parchment-2); border-left: 4px solid var(--copper);
  border-radius: var(--radius);
}
.voc-info header h3 { margin: 0; color: var(--leather); font-size: 1.4rem; }
.voc-info header p { margin: 2px 0 16px; color: var(--ink-soft); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.stat { padding: 10px 12px; border-radius: var(--radius); background: #fffdf9; border: 1px solid var(--parchment-2); border-top: 3px solid var(--copper); }
.stat span { display: block; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.stat b { display: block; font: 700 1.5rem 'Cinzel', serif; color: var(--leather); line-height: 1.3; }
.stat small { color: var(--ink-soft); font-size: .82rem; }
.stat.hp { border-top-color: #b8322a; }
.stat.mp { border-top-color: #2f5fa8; }
.stat.cap { border-top-color: #8a6d3b; }
.stat.regen { border-top-color: var(--ok); }
.stat.regen b { font-size: 1.05rem; }
.ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; margin-bottom: 10px; }
@media (max-width: 640px) { .ratings { grid-template-columns: 1fr; } }
.rating { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--leather); }
.rating .pips { display: flex; gap: 4px; }
.rating .pips i { flex: 1; height: 8px; border-radius: 2px; background: var(--parchment-2); }
.rating .pips i.on { background: linear-gradient(90deg, var(--copper), var(--gold)); }

.form-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: end; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
.subsection-title { margin: 0 0 8px; color: var(--leather); font-size: 1.2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#character-form { gap: 18px; }
.town-grid .card { padding: 10px 8px; text-align: center; }
.town-grid .card b { padding: 0 0 2px; font-size: .95rem; }
.town-grid .card small { display: block; color: #d8c7a6; font-size: .75rem; line-height: 1.3; }
.sex-options { display: flex; gap: 10px; }
.sex-options .choice { flex: 1; }
.sex-options .card b { padding: 10px; }

/* ---------- Conta ---------- */
.account-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.account-head h2 { margin: 0; color: var(--leather); }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.account-head + .alert { margin-bottom: 24px; }

table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { text-align: left; font: 700 .85rem 'Cinzel', serif; color: var(--copper-dark); border-bottom: 2px solid var(--parchment-2); padding: 8px 6px; }
td { padding: 9px 6px; border-bottom: 1px solid var(--parchment-2); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #b9a98e; margin-right: 6px; }
.status-dot.on { background: #4caf50; }
.empty { color: var(--ink-soft); font-style: italic; }
td.row-actions { text-align: right; width: 1%; white-space: nowrap; }

/* Top 10 */
.ranking { max-width: 760px; margin: 0 auto; }
.ranking th.num, .ranking td.num { text-align: right; }
.ranking td { font-size: 1rem; }
.ranking td:first-child { width: 1%; }
.ranking td.num:not(.exp) { font: 700 1.05rem 'Cinzel', serif; color: var(--leather); }
.ranking tbody tr:nth-child(-n+3) td { background: rgba(232, 160, 48, .07); }
.rank {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 700 .9rem 'Cinzel', serif; color: var(--ink-soft); background: var(--parchment-2);
}
.rank-1 { background: linear-gradient(180deg, #f6d36b, #c8961f); color: #4a3205; box-shadow: 0 0 0 2px #fff3c4 inset; }
.rank-2 { background: linear-gradient(180deg, #e4e4e4, #a9a9a9); color: #333; }
.rank-3 { background: linear-gradient(180deg, #e3a76f, #a5612d); color: #3e1f08; }
@media (max-width: 560px) { .ranking .exp { display: none; } }
/* versão compacta do botão ghost vermelho, para linhas de tabela */
.row-danger {
  cursor: pointer; padding: 4px 12px; border: 2px solid #5e140d; border-radius: var(--radius);
  font: 700 .8rem 'Cinzel', serif; letter-spacing: .04em; color: var(--gold-soft);
  background: linear-gradient(180deg, #c0392b 0%, #8e1f15 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 229, 198, .4);
  transition: filter .15s;
}
.row-danger:hover { filter: brightness(1.1); }
.row-danger[disabled] { opacity: .55; cursor: not-allowed; filter: none; }

.btn.danger { background: linear-gradient(180deg, #c0392b 0%, #8e1f15 100%); border-color: #5e140d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 4px 0 #4a0f09; }
.btn.danger[disabled] { opacity: .55; cursor: not-allowed; }
/* Botões ghost: verde confirma; vermelho sai ou desfaz. */
.btn.ghost.danger { border-color: #5e140d; box-shadow: inset 0 0 0 1px rgba(255, 229, 198, .4); }
.btn.ghost.confirm { background: linear-gradient(180deg, #3f8a38 0%, var(--ok) 100%); border-color: #1f4a1c; box-shadow: inset 0 0 0 1px rgba(255, 229, 198, .4); }

.confirm-dialog {
  max-width: 440px; width: calc(100% - 32px); padding: 0; border: 2px solid var(--copper); border-radius: var(--radius);
  background: var(--parchment); color: var(--ink); box-shadow: var(--shadow);
}
.confirm-dialog::backdrop { background: rgba(20, 12, 4, .65); }
.confirm-dialog form { padding: 24px; }
.confirm-dialog h3 { margin: 0; color: var(--danger); font-size: 1.3rem; }
.confirm-dialog p { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Rodapé ---------- */
footer { padding: 32px 16px 40px; text-align: center; color: #b9a98e; font-size: .85rem; }
footer strong { color: var(--gold-soft); font-family: 'Cinzel', serif; }

[hidden] { display: none !important; }

/* ---------- OP Coins ---------- */
.coin-balance { display: flex; align-items: center; gap: 12px; }
.coin-balance img { width: 32px; height: 32px; image-rendering: pixelated; }
.coin-balance b { display: block; font: 700 1.3rem 'Cinzel', serif; color: var(--leather); }
.coin-packs { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 20px; }
.coin-packs .card { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; padding: 16px 8px; }
.coin-packs .card img { width: 32px; height: 32px; image-rendering: pixelated; }
.coin-packs .card b { padding: 0; font-size: 1.05rem; }
.coin-packs .card small { color: var(--gold-soft); }
.terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; font-weight: 400; font-size: .92rem; }
.terms-check input { width: auto; margin-top: 4px; }
.terms-list { margin: 0; padding-left: 20px; font-size: .92rem; }
.coin-checkout { margin-top: 20px; }
.coin-checkout .actions { margin-top: 12px; }
.order-status.paid { color: var(--ok); font-weight: 600; }
.order-status.reversed { color: var(--danger); font-weight: 600; }
.bug-list { display: grid; gap: 14px; }
.bug-report { padding: 16px; background: #fffdf9; border: 1px solid var(--parchment-2); border-radius: var(--radius); overflow-wrap: anywhere; }
.bug-report h3 { margin: 0 0 4px; color: var(--leather); font-size: 1.05rem; }
.bug-report .hint { margin: 0 0 10px; }
.bug-report select { width: auto; }
.bug-description { margin: 0 0 12px; white-space: pre-wrap; }