/* ===========================
   WorldWeavers — styles.css
   (tema-first, sem cores fixas)
   =========================== */

/* 1) Webfonts (opcional) */
@font-face{
  font-family: "Syfy WW";
  src: url("/imgs/fonts/syfy.woff2") format("woff2"),
       url("/imgs/fonts/syfy.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Papyrus WW";
  src: url("/imgs/fonts/Papyrus.woff2") format("woff2"),
       url("/imgs/fonts/Papyrus.woff")  format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2) Design tokens (podem ser sobrescritos por themes/*.json via inline style) */
:root{
  /* cores base */
  --bg:#0b0b10; --fg:#e6e6ee; --muted:#9aa0a6;
  --accent:#7aa2ff;

  /* superfícies */
  --card:#141621;
  --border:#22263a;
  --divider:#2a2e45;

  /* navegação/topo/botões */
  --topbar-bg: var(--card);
  --topbar-fg: var(--fg);
  --btn-bg:#1e2230; --btn-fg:#e6e6ee;

  /* campos de formulário */
  --input-bg:#0e1020;
  --input-fg:var(--fg);
  --input-border:var(--divider);

  /* layout */
  --radius:12px; --radius-sm:9px;
  --shadow:0 2px 8px rgba(0,0,0,.25);
  --container-max: 860px;

  /* tipografia/texturas */
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --heading-font:"Papyrus WW", "Cinzel Decorative", serif;
  --texture-url:none;
  --texture-opacity:.08;

  /* scrollbars */
  --scrollbar-track:#0f0f14;
  --scrollbar-thumb:#202436;

  /* ancoragem com header fixo */
  --sticky-offset: 72px;

  /* altura visual do marcador (ajuste conforme seu PNG/SVG) */
  --marker-h: 56px;
}

/* 3) Reset essencial */
*,
*::before,
*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth } /* troque para 'auto' se quiser depurar sem animação */
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:var(--font);
  background-image: var(--texture-url);
  background-size: cover;
  background-blend-mode: multiply;
}

/* 4) Topbar */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  box-shadow: 0 2px 14px rgba(0,0,0,.08);
  border-bottom:1px solid var(--border);
}
.topbar .brand{ font-weight:700; color: var(--topbar-fg) }

/* 5) Menu principal (nav) */
.nav{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:8px 12px;
  background: transparent;
}
.nav .btn-nav{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px;
  border-radius: calc(var(--radius) + 6px);
  border:1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration:none; line-height:1;
  transition: filter .15s ease, box-shadow .15s ease, transform .08s ease;
}
.nav .btn-nav:hover,
.nav .btn-nav:focus{ filter: brightness(0.95) }
.nav .btn-nav:active{ transform: translateY(0) }
.nav .btn-nav.active,
.nav .btn-nav[aria-current="page"]{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--btn-bg), white 35%);
}

/* selects (Language/Theme) com a mesma estética */
.nav select{
  appearance:none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border:1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  padding:8px 12px;
}
.nav .lang, .nav .theme{
  display:inline-flex; align-items:center; gap:6px; color: var(--topbar-fg)
}

/* 6) Submenu (ghost/outline) */
.subnav{
  display:flex; flex-wrap:wrap; gap:10px;
  padding:8px 12px;
  background: transparent;
  border-bottom:1px solid var(--border);
}
.subnav a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:5px 10px; border-radius:var(--radius-sm);
  border:1px dashed var(--border);
  background:transparent;
  color:var(--fg);
  text-decoration:none; opacity:.9;
  transition:background .12s ease, opacity .12s ease, transform .08s ease;
}
.subnav a:hover{ opacity:1; background:rgba(255,255,255,.03) }

/* 7) Conteúdo base */
.container{ max-width:var(--container-max); margin:24px auto; padding:0 16px }
.card{
  background:var(--card);
  padding:16px; border-radius:14px;
  border:1px solid var(--border);
}
.page{
  line-height:1.6;
  overflow-anchor:none; /* evita 'empurrões' automáticos */
}

/* 8) Botões genéricos */
.btn{
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--border);
  padding:10px 14px; border-radius:10px; cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.25) }
.btn.ghost{ background:transparent; border:1px solid var(--muted); color:var(--fg) }
.btn.small{ padding:6px 10px; font-size:13px; border-radius:8px }
.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }

/* 9) Formulários */
.full{ width:100%; box-sizing:border-box }
textarea.full{
  min-height:360px;
  background: var(--input-bg); color: var(--input-fg);
  border:1px solid var(--input-border);
  border-radius:12px; padding:12px;
}
input[type="text"], textarea{
  background: var(--input-bg); color: var(--input-fg);
  border:1px solid var(--input-border);
  border-radius:10px; padding:10px 12px;
}
a:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px; border-radius:8px;
}

/* 10) Mensagens / rodapé */
.msg{ padding:12px 14px; border-radius:12px; margin:12px 0 }
.msg.success{ background:#18351f; color:#c6f6d5 }
.msg.error{ background:#3b1c1c; color:#ffd2d2 }
.foot{ opacity:.7; padding:24px; text-align:center }

/* 11) Player: choices etc. */
.choice-block{
  background:var(--card); padding:12px; border-radius:12px; margin:12px 0;
  border:1px solid var(--border)
}
.choice-block .choice-title{ margin-bottom:8px; font-weight:600; opacity:.9 }
.choice{ display:inline-block; margin:8px 8px 0 0 }
.choice.input-line{ display:flex; gap:8px; align-items:center }
.choice.input-line input[type="text"]{
  background:var(--input-bg); color:var(--input-fg);
  border:1px solid var(--input-border);
  border-radius:10px; padding:10px 12px;
}
.ent{ padding:1px 4px; border-radius:6px; background:rgba(255,255,255,.06) }
.ent-character{ background:rgba(122,162,255,.12) }
.ent-place{ background:rgba(255,200,122,.12) }

/* 12) Marcador (#mark) — reserva espaço no fluxo e ancora sob o header fixo */
.scroll-anchor{
  /* a âncora participa do fluxo e reserva a altura do ícone */
  display:block;
  min-height: var(--marker-h);
  margin:0; padding:0;
  position: relative;
  scroll-margin-top: var(--sticky-offset);
  z-index: 1;
}
/* o ícone do marcador fica “dentro” da âncora e empurra o texto para baixo */
.scroll-anchor .marker{
  position: absolute; top:0; left:0;
  display:block;
  line-height:0;
  pointer-events:none;   /* não intercepta seleção/clicks */
  z-index: 2;
}
.scroll-anchor .marker img{
  display:block; height: calc(var(--marker-h) - 6px); /* pequeno respiro */
}
/* afasta o conteúdo que vem logo depois do marcador */
.scroll-anchor + *{ margin-top: 6px }

/* Forms NÃO devem ter offset de rolagem ao focar */
.choice-block, form.choice{ scroll-margin-top: 0 }

/* garantir stacking normal do conteúdo */
header, main, footer{ position:relative; z-index:1 }

/* 13) Temas específicos */
body[data-theme="medieval"]{
  position:relative; background:var(--bg); isolation:isolate;
}
body[data-theme="medieval"]::before{
  content:""; position:fixed; inset:0;
  background: url(var(--texture-url)) center/800px auto repeat;
  opacity: var(--texture-opacity);
  pointer-events:none; z-index:0;
}
body[data-theme="scifi"]{
  --font: "Syfy WW","Orbitron","Oxanium","Rajdhani","Exo 2",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --heading-font: "Syfy WW","Orbitron","Oxanium",sans-serif;
  font-family: var(--font, "Syfy WW"), sans-serif;
  background-color: var(--bg);
  position:relative; isolation:isolate;
}

/* Títulos / separadores */
h1, h2, h3{
  font-family: var(--heading-font, "Papyrus WW", "Cinzel Decorative", serif);
  color:var(--accent);
}
hr{
  border:none; height:2px;
  background:linear-gradient(to right, transparent, var(--divider), transparent);
}
.dropcap:first-letter{
  font-size: var(--dropcap-size, 2.75rem);
  color: var(--dropcap-color, var(--accent));
  float:left; line-height:.8; margin-right:6px;
}

/* 14) Scrollbar (coeso com tema) */
*::-webkit-scrollbar{ width:12px; height:12px }
*::-webkit-scrollbar-track{ background: var(--scrollbar-track) }
*::-webkit-scrollbar-thumb{
  background: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* 15) Responsivo */
@media (max-width: 720px){
  .topbar{ flex-wrap:wrap; gap:8px }
  .actions{ width:100% }
  .container{ margin:16px auto }
}