/* =========================================================
   Sala de Veludo — design compartilhado
   Insônia II: Teofania · ferramentas de Persona
   Mobile-first: o celular é o layout base, o desktop é o upgrade.
   ========================================================= */

:root{
  /* paleta */
  --veludo:#0e1330;        /* azul-noite da sala */
  --veludo-2:#182046;      /* painel */
  --veludo-3:#212c5e;      /* painel claro / hover */
  --azul:#2a45b8;
  --azul-claro:#5b7bff;
  --vermelho:#d81e33;      /* cortina */
  --vermelho-esc:#9c1122;
  --ouro:#e8b93a;          /* moldura */
  --papel:#f2eee2;
  --tinta:#0a0a0a;         /* contorno preto puro */
  --texto:#e9eaf4;
  --suave:#969ec9;
  --linha:#2c3768;
  --ok:#3fbf7f;
  --erro:#ff5a6b;

  /* tipos */
  --display:'Archivo','Arial Narrow','Helvetica Neue',Impact,sans-serif;
  --ui:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* medidas */
  --borda:3px;
  --sombra:5px 5px 0 rgba(0,0,0,.6);
  --raio:0;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% -15%, rgba(91,123,255,.20), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px),
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.3px) 0 0/14px 14px,
    var(--veludo);
  background-attachment:fixed;
  color:var(--texto);
  font:400 15px/1.55 var(--ui);
  padding-bottom:62px;              /* espaço da barra fixa do celular */
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}

/* ---------- cortina ---------- */
.cortina{
  height:15px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 40%),
    repeating-linear-gradient(90deg, #6d0b1a 0 11px, #a81427 11px 22px, #c11a2e 22px 28px, #8f1122 28px 39px);
  box-shadow:0 3px 0 var(--tinta), 0 8px 22px rgba(0,0,0,.6);
  position:relative; z-index:5;
}

/* ---------- cabeçalho ---------- */
.topo{
  max-width:1180px; margin:0 auto; padding:20px 16px 12px;
  display:flex; align-items:flex-end; gap:14px 20px; flex-wrap:wrap;
}
.topo h1{
  display:inline-block; margin:0;
  background:var(--vermelho);
  color:#fff;
  padding:.30em .85em .32em .55em;
  clip-path:polygon(0 0, 100% 0, calc(100% - .85em) 100%, 0 100%);
  font-family:var(--display);
  font-style:italic; font-weight:850; font-stretch:78%;
  font-size:clamp(21px,5.2vw,30px); line-height:1.05;
  text-transform:uppercase; letter-spacing:.01em;
  text-shadow:2px 2px 0 rgba(0,0,0,.45);
  filter:drop-shadow(4px 4px 0 var(--tinta));
}
.topo .sub{color:var(--suave); font-size:13px; margin:6px 0 0}
.topo .marca{margin:0}
.topo .acoes{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.acoes{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.acoes a{
  font-family:var(--display); font-style:italic; font-weight:700; font-stretch:80%;
  font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--texto); text-decoration:none; background:transparent;
  border:var(--borda) solid var(--suave);
  padding:.62em 1em; min-height:42px; display:inline-flex; align-items:center;
}
.acoes a:hover{background:rgba(255,255,255,.09); color:#fff; border-color:var(--texto)}

/* ---------- botões ---------- */
button{
  font-family:var(--display);
  font-style:italic; font-weight:700; font-stretch:80%;
  font-size:13px; letter-spacing:.05em; text-transform:uppercase;
  color:#fff; background:var(--azul);
  border:var(--borda) solid var(--tinta);
  box-shadow:3px 3px 0 var(--tinta);
  padding:.62em 1em; min-height:42px;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, background .12s ease;
}
button:hover:not(:disabled){background:var(--azul-claro); transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--tinta)}
button:active:not(:disabled){transform:translate(2px,2px); box-shadow:1px 1px 0 var(--tinta)}
button:disabled{opacity:.35; cursor:not-allowed; box-shadow:2px 2px 0 var(--tinta)}
button.sec{background:transparent; color:var(--texto); border-color:var(--suave)}
button.sec:hover:not(:disabled){background:rgba(255,255,255,.09); color:#fff}
button.x{
  padding:0; width:38px; min-height:38px; line-height:1;
  background:transparent; color:var(--suave); border-color:var(--linha); box-shadow:none;
  font-family:var(--ui); font-style:normal; font-weight:700; letter-spacing:0; text-transform:none;
}
button.x:hover:not(:disabled){color:#fff; background:var(--vermelho); border-color:var(--tinta); box-shadow:2px 2px 0 var(--tinta)}
:focus-visible{outline:3px solid var(--ouro); outline-offset:2px}

/* ---------- formulários ---------- */
label{display:block; font-size:12.5px; font-weight:600; color:var(--suave); margin:0 0 5px; letter-spacing:.01em}
input[type=text],input[type=number],select,textarea{
  width:100%; font:400 16px/1.4 var(--ui); color:var(--texto);
  background:rgba(6,9,26,.72);
  border:2px solid var(--linha);
  border-radius:var(--raio);
  padding:.6em .65em; min-height:44px;
  appearance:none; -webkit-appearance:none;
}
select{
  background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 11px) 50%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
  padding-right:34px;
}
option{background:#121a3d; color:var(--texto)}
textarea{resize:vertical; min-height:70px}
input:focus,select:focus,textarea:focus{
  outline:0; border-color:var(--ouro); box-shadow:0 0 0 3px rgba(232,185,58,.22);
}
input[readonly]{opacity:.7}
.check{display:flex; align-items:flex-start; gap:8px; font-size:13px; font-weight:500; color:var(--texto); margin:0 0 4px; cursor:pointer}
.check input{width:auto; min-height:0; margin:2px 0 0; accent-color:var(--vermelho)}
.pill{font-size:11.5px; font-weight:600; color:var(--suave); white-space:nowrap}
.hr-sep{border:0; border-top:1px solid var(--linha); margin:14px 0}

/* ---------- grades ---------- */
.grid{display:grid; gap:12px}
.g2,.g3,.g4{grid-template-columns:1fr}
.linha{display:grid; gap:10px 12px; align-items:end; margin-bottom:10px}
.decl{grid-column:1/-1; margin:-2px 0 10px}
.grade-simples{grid-template-columns:1fr auto auto}
.grade-poder{grid-template-columns:1fr}
.grade-magia{grid-template-columns:1fr}

/* ---------- painel de poderes (catálogo + criador) ---------- */
.painel-poder{border:2px solid var(--linha); background:rgba(6,9,26,.45); padding:12px; margin-top:12px}
.abas{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.abas .aba{background:transparent; border-color:var(--suave); color:var(--texto); font-size:12px; padding:.5em .9em; min-height:38px}
.abas .aba.on{background:var(--ouro); color:var(--tinta); border-color:var(--tinta)}
.abas .x{margin-left:auto}
.catalogo{display:grid; gap:8px}
.catalogo .item{align-items:center}
.catalogo .info b{font-size:14px}
.catalogo .info div{font-size:12.5px}

/* ---------- stepper de dado ---------- */
.stepper{display:flex; align-items:stretch; border:2px solid var(--tinta); background:rgba(6,9,26,.7)}
.stepper button{
  border:0; box-shadow:none; background:transparent; color:var(--texto);
  padding:0; min-height:42px; width:44px; font-size:19px; line-height:1;
}
.stepper button:hover:not(:disabled){background:var(--azul); color:#fff; transform:none; box-shadow:none}
.stepper button:active:not(:disabled){transform:none; box-shadow:none}
.stepper button:disabled{opacity:.25}
.stepper .val{flex:1; text-align:center; font:850 17px/42px var(--display); font-style:italic; font-stretch:85%; color:var(--ouro)}
.custo{display:block; margin-top:5px}
.d20opt{margin-top:8px; font-size:12.5px}

/* ---------- painéis ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:0 16px 48px}
.painel{
  background:var(--veludo-2);
  border:var(--borda) solid var(--tinta);
  box-shadow:var(--sombra);
  padding:18px;
}
.painel.preview{border-top-width:5px; border-top-color:var(--ouro)}
.painel.form{border-top-width:5px; border-top-color:var(--vermelho)}
.step{border-top:1px solid var(--linha); padding-top:16px; margin-top:18px}
.step:first-of-type{border-top:0; margin-top:0; padding-top:0}
.step h2,.painel > h2{
  font-family:var(--display); font-style:italic; font-weight:800; font-stretch:78%;
  font-size:13px; line-height:1.1; text-transform:uppercase; letter-spacing:.06em;
  color:var(--texto); margin:0 0 14px;
  display:flex; gap:9px; align-items:center; flex-wrap:wrap;
}
.step h2 .n,.painel > h2 .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; flex:0 0 24px;
  background:var(--ouro); color:var(--tinta);
  border:2px solid var(--tinta); box-shadow:2px 2px 0 var(--tinta);
  font-size:12px; font-weight:800;
}
.step h2 .dica,.painel > h2 .dica{font-family:var(--ui); font-style:normal; font-weight:500; text-transform:none; letter-spacing:0; color:var(--suave); font-size:12px}

/* ---------- avisos ---------- */
.aviso{
  border:2px solid var(--erro); border-left-width:6px;
  background:rgba(255,90,107,.11); color:#ffd7db;
  padding:9px 12px; font-size:13px; margin-top:8px;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
}
.aviso.ok{border-color:var(--ok); background:rgba(63,191,127,.11); color:#c9f5de}

/* ---------- barra de PP ---------- */
.barra{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin:0 0 12px}
.barra .num{font:850 30px/1 var(--display); font-style:italic; font-stretch:85%; color:var(--ouro)}
.barra .num.ok{color:var(--ok)} .barra .num.ruim{color:var(--erro)}
.barra .mut{color:var(--suave); font-size:12.5px}
.barra .mut:last-child{margin-left:auto}

/* ---------- ficha ---------- */
.ficha{
  --ficha-bg:#101a3f; --ficha-ink:#e9eaf4; --ficha-muted:#9aa2cf; --ficha-line:#2e3a70;
  background:var(--ficha-bg); color:var(--ficha-ink);
  padding:16px; font-size:14px;
  border:2px solid rgba(232,185,58,.4);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
}
.ficha h3{
  font-family:var(--display); font-style:italic; font-weight:850; font-stretch:78%;
  font-size:clamp(19px,5vw,25px); line-height:1.05; margin:0 0 4px;
  text-transform:uppercase; letter-spacing:.01em; color:#fff;
  border-bottom:4px solid var(--vermelho); padding-bottom:8px;
}
.ficha .sub{color:var(--ficha-muted); font-size:12.5px; margin:8px 0 14px}
.ficha table{width:100%; border-collapse:collapse; font-size:13.5px}
.ficha td{padding:6px 0; vertical-align:top; border-bottom:1px solid var(--ficha-line)}
.ficha td.k{color:var(--ficha-muted); font-weight:600}
.ficha tr > td.k{width:120px}
/* a coluna numérica das tabelas aninhadas (poderes/magias) é estreita,
   senão a tabela interna empurra a ficha para fora do painel */
.ficha table table tr > td.k{width:26px; text-align:right; font-size:12.5px; padding-right:8px}
.ficha .vazio{color:var(--ficha-muted); font-style:italic; font-weight:400}
/* as pills da ficha podem quebrar: a de PP é longa e nowrap estouraria a tabela */
.ficha .pill{color:var(--ficha-muted); white-space:normal}
.ficha b{color:#fff}
.ficha pre{font:12px/1.5 var(--mono); margin:6px 0 0; white-space:pre-wrap; color:var(--ficha-ink)}
/* poder: nome, descrição, metadados e custo em camadas legíveis */
.ficha .desc-poder{font-size:13.5px; margin-top:3px}
.ficha .meta-poder{font:12px/1.5 var(--mono); color:var(--ficha-muted); margin-top:4px; white-space:pre-wrap}

/* ---------- barra fixa do celular ---------- */
.rodape-movel{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  background:var(--veludo-2); border-top:var(--borda) solid var(--tinta);
  padding:8px 14px; box-shadow:0 -6px 18px rgba(0,0,0,.55);
}
.rodape-movel-num{font:850 24px/1 var(--display); font-style:italic; font-stretch:85%; color:var(--ouro)}
.rodape-movel-num.ruim{color:var(--erro)}
.rodape-movel-txt{color:var(--suave); font-size:12.5px; font-weight:600}
.rodape-movel-av{margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ouro)}
.rodape-movel-av.av-erro{color:var(--erro)}
.rodape-movel-av:empty{display:none}

/* ---------- listas e blocos ---------- */
.item{
  border:2px solid var(--linha); background:rgba(6,9,26,.4);
  padding:10px 12px; margin-bottom:8px;
  display:flex; gap:10px; align-items:flex-start;
}
.item .base{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta); background:var(--ouro); padding:1px 7px; margin-left:6px}
.item .info{flex:1; font-size:13px; min-width:0}
.item .info b{font-size:14.5px}
.vazio-box{border:2px dashed var(--linha); padding:20px 16px; text-align:center; color:var(--suave); font-size:13px}
.sel{border-top:1px solid var(--linha); padding-top:12px; margin-top:12px}
.sel h3{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--suave); margin:0 0 8px}
.sel .comp{font-size:12.5px; font-weight:800; color:var(--texto); margin:10px 0 5px; letter-spacing:.02em}
.sel label{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; font-weight:500; color:var(--texto); margin:0 0 6px; cursor:pointer}
.sel label input{width:auto; min-height:0; margin:2px 0 0; accent-color:var(--vermelho); flex:0 0 auto}
.sel label span.c{color:var(--suave); font-size:11.5px; display:block}

/* ---------- detalhes / regras ---------- */
.regras{max-width:1180px; margin:0 auto; padding:0 16px 40px}
.meta{color:var(--suave); font-size:12.5px; margin:0 0 12px; font-weight:600}
.texto{font:12.5px/1.6 var(--mono); white-space:pre-wrap; margin:12px 0 0; color:var(--texto)}
details{
  background:var(--veludo-2); border:var(--borda) solid var(--tinta);
  box-shadow:var(--sombra); padding:14px 16px;
}
summary{
  cursor:pointer; font-family:var(--display); font-style:italic; font-weight:750; font-stretch:80%;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ouro);
}
.cols{display:grid; grid-template-columns:1fr; gap:22px; margin-top:16px}
.cols h4{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--texto); margin:0 0 8px}
.cols table{width:100%; border-collapse:collapse; font-size:12.5px}
.cols td,.cols th{padding:4px 6px; border-bottom:1px solid var(--linha); text-align:left}
.cols th{color:var(--suave); font-weight:600}
.cols ol,.cols ul{margin:0; padding-left:18px; font-size:12.5px; color:#cdd2e8}
.cols li{margin-bottom:4px}

/* ---------- landing ---------- */
/* a index é uma tela curta: sem barra fixa, sem sobra de rolagem e sem scrollbar */
body.pg-index{padding-bottom:0}
body.pg-index .pagina{padding-bottom:40px}
html.pg-index{scrollbar-width:none}
html.pg-index::-webkit-scrollbar{display:none}
.pagina{max-width:900px; margin:0 auto; padding:26px 16px 60px}
.pagina > .painel{margin-bottom:16px}
.marca{margin:0 0 24px}
.marca h1{
  display:inline-block; margin:0;
  background:var(--vermelho); color:#fff;
  padding:.30em .85em .32em .55em;
  clip-path:polygon(0 0, 100% 0, calc(100% - .85em) 100%, 0 100%);
  font-family:var(--display); font-style:italic; font-weight:850; font-stretch:78%;
  font-size:clamp(26px,7vw,42px); line-height:1.02; text-transform:uppercase;
  text-shadow:2px 2px 0 rgba(0,0,0,.45);
  filter:drop-shadow(5px 5px 0 var(--tinta));
}
.marca .sub{color:var(--suave); font-size:14px; margin:14px 0 0; max-width:62ch}
.menu{display:grid; gap:14px}
.opcao{
  display:grid; gap:6px; text-decoration:none; color:inherit;
  background:var(--veludo-2); border:var(--borda) solid var(--tinta);
  border-left-width:8px; box-shadow:var(--sombra);
  padding:16px 18px;
  transition:transform .1s ease, box-shadow .1s ease, background .12s ease;
}
.opcao:hover{background:var(--veludo-3); transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(0,0,0,.6)}
.opcao b{
  font-family:var(--display); font-style:italic; font-weight:800; font-stretch:80%;
  font-size:18px; text-transform:uppercase; letter-spacing:.02em; color:#fff;
}
.opcao span{color:var(--suave); font-size:13.5px; max-width:70ch}
.opcao:nth-child(1){border-left-color:var(--vermelho)}
.opcao:nth-child(2){border-left-color:var(--azul-claro)}
.opcao:nth-child(3){border-left-color:var(--ouro)}
.rodape{max-width:1180px; margin:0 auto; padding:0 16px 40px; color:var(--suave); font-size:11.5px}
.rodape-links{display:inline-flex; gap:16px; margin-left:16px}
.rodape a{color:var(--ouro); text-decoration:none}
.rodape a:hover{text-decoration:underline}

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width:560px){
  .g4{grid-template-columns:1fr 1fr}
}
@media (min-width:760px){
  .cols{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
  .grade-poder{grid-template-columns:1.6fr .9fr .5fr auto}
  .grade-magia{grid-template-columns:1.4fr .9fr .7fr .6fr auto}
  .grade-simples{grid-template-columns:1fr auto auto}
}
@media (min-width:1000px){
  body{padding-bottom:0}
  .rodape-movel{display:none}
  .wrap{
    display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:20px; align-items:start;
  }
  .preview{position:sticky; top:16px}
  .topo{padding:26px 16px 14px}
  .pagina{padding:34px 16px 60px}
  .g4{grid-template-columns:repeat(4,1fr)}
}

/* no celular a barra fixa e a grade simples precisam de respiro */
@media (max-width:759px){
  .grade-simples{grid-template-columns:1fr auto; grid-template-areas:"sel sel" "custo rm"}
  .grade-simples > :nth-child(1){grid-area:sel}
  .grade-simples > :nth-child(2){grid-area:custo; justify-self:start}
  .grade-simples > :nth-child(3){grid-area:rm; justify-self:end}
  .grade-poder{grid-template-columns:1fr 1fr auto; grid-template-areas:"nome nome nome" "tam pd rm" "efeito efeito efeito"}
  .grade-poder > :nth-child(1){grid-area:nome}
  .grade-poder > :nth-child(2){grid-area:tam}
  .grade-poder > :nth-child(3){grid-area:pd}
  .grade-poder > :nth-child(4){grid-area:rm}
  .grade-poder > :nth-child(5){grid-area:efeito}
  .linha > .x{justify-self:end}
  .painel{padding:15px}
  .topo .acoes{margin-left:0; width:100%}
  .topo .acoes button,.topo .acoes a{flex:1 1 auto; justify-content:center}
  .item{flex-wrap:wrap}
}

/* no celular a ficha vira lista de blocos, não tabela */
@media (max-width:640px){
  .ficha table tr{display:block}
  .ficha table td{display:block; width:auto; border-bottom:0; padding:2px 0}
  .ficha table td.k{
    width:auto; padding-bottom:0; font-size:10.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:.08em;
  }
  .ficha table td + td{padding-top:1px; padding-bottom:10px; border-bottom:1px solid var(--ficha-line)}
  .ficha table tr:last-child td:last-child{border-bottom:0}
  /* as tabelas internas (poderes e magias) mantêm a linha na horizontal */
  .ficha table table tr{display:table-row}
  .ficha table table td{display:table-cell; padding:6px 0; border-bottom:1px solid var(--ficha-line)}
  .ficha table table td + td{padding-bottom:6px}
  .ficha table table td.k{
    width:26px; text-align:right; font-size:12.5px; font-weight:600;
    text-transform:none; letter-spacing:0; padding-bottom:6px;
  }
}

/* =========================================================
   IMPRESSÃO — a ficha sai em papel
   ========================================================= */
@media print{
  body{background:#fff; padding:0; color:#000}
  .cortina,.topo,.form,.regras,.rodape,.rodape-movel,.acoes,.no-print{display:none !important}
  .wrap,.pagina{display:block; max-width:none; padding:0; margin:0}
  .painel{border:0; box-shadow:none; padding:0; background:none; margin:0}
  .preview{position:static}
  .ficha{
    --ficha-bg:#fff; --ficha-ink:#101018; --ficha-muted:#555; --ficha-line:#c9c9c9;
    padding:0; font-size:11.5pt; border:0; box-shadow:none;
  }
  .ficha h3{color:#000; border-bottom-color:#000}
  .ficha b{color:#000}
  .ficha .pill{color:#555}
  .ficha table tr{display:table-row}
  .ficha table td{display:table-cell; width:auto; padding:5px 0; border-bottom:1px solid var(--ficha-line)}
  .ficha table td.k{width:120px; padding-bottom:5px; font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0}
  .barra .num{color:#000}
  .barra .mut{color:#444}
  a{color:#000}
  /* cada página imprime só a ficha */
  body.pg-fundir .pagina > .painel:not(#cardResultado){display:none}
  body.pg-ver #vazio,body.pg-ver details{display:none}
  body.pg-index .menu{display:none}
}