:root {
  --papel: #ece5d3;
  --papel-2: #f5f0e3;
  --papel-3: #e1d8c1;
  --linha: #c9bc9b;
  --tinta: #2a2620;
  --tinta-2: #5d5547;
  --oliva: #3d4a2a;
  --oliva-2: #56663c;
  --carimbo: #9b2b22;
  --azul: #27467f;
  --ambar: #a8740c;
  --verde: #2f6b3a;
  --cinza: #7c7468;
  --sombra: 0 1px 0 rgba(255,255,255,.6) inset, 0 6px 18px -10px rgba(40,30,10,.45);
  --topo: #3d4a2a;
  --botao: #3d4a2a;
  --botao-2: #56663c;
  --botao-texto: #f3ecd8;
  --fonte: "IBM Plex Sans", system-ui, sans-serif;
  --maquina: "Special Elite", "Courier New", monospace;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #1e1d19; --papel-2: #26241f; --papel-3: #302d26; --linha: #48433a;
    --tinta: #ebe4d2; --tinta-2: #b4aa96; --oliva: #8fa36a; --oliva-2: #a6b984;
    --carimbo: #e0695d; --azul: #8eaee8; --ambar: #e0ad4a; --verde: #79c086; --cinza: #9a917f;
    --sombra: 0 6px 18px -10px rgba(0,0,0,.7);
    --topo: #2c3520; --botao: #8fa36a; --botao-2: #a6b984; --botao-texto: #1a1c14;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #1e1d19; --papel-2: #26241f; --papel-3: #302d26; --linha: #48433a;
  --tinta: #ebe4d2; --tinta-2: #b4aa96; --oliva: #8fa36a; --oliva-2: #a6b984;
  --carimbo: #e0695d; --azul: #8eaee8; --ambar: #e0ad4a; --verde: #79c086; --cinza: #9a917f;
  --sombra: 0 6px 18px -10px rgba(0,0,0,.7);
  --topo: #2c3520; --botao: #8fa36a; --botao-2: #a6b984; --botao-texto: #1a1c14;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta); font: 15px/1.55 var(--fonte);
  background-image: radial-gradient(rgba(120,100,60,.07) 1px, transparent 1px);
  background-size: 4px 4px; min-height: 100vh;
}
a { color: var(--azul); }
h1, h2, h3 { font-family: var(--maquina); font-weight: 400; letter-spacing: .02em; margin: 0 0 .6rem; line-height: 1.2; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .8rem; }
small, .fraco { color: var(--tinta-2); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* topo */
.topo {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--topo); color: #eee6d1; border-bottom: 3px solid #1f2614;
}
.marca { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.marca b { display: block; font-family: var(--maquina); font-weight: 400; font-size: 1.15rem; letter-spacing: .04em; }
.marca small { display: block; color: #cfc6ad; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.marca-selo {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 2px solid #e9e2cf; font-family: var(--maquina); font-size: .8rem;
}
.menu { display: flex; gap: .2rem; flex-wrap: wrap; flex: 1; }
.menu a {
  color: #e9e2cf; text-decoration: none; padding: .35rem .7rem; border-radius: 4px; font-size: .92rem;
}
.menu a:hover { background: rgba(255,255,255,.1); }
.menu a.ativo { background: rgba(0,0,0,.25); box-shadow: inset 0 -2px 0 #e9e2cf; }
.conta { display: flex; align-items: center; gap: .5rem; margin-left: auto; font-size: .9rem; }
.conta img { width: 28px; height: 28px; border-radius: 50%; }
.conta a { color: #e9e2cf; }

/* página */
.pagina { max-width: 1120px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.cabecalho { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.cabecalho p { margin: 0; color: var(--tinta-2); }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grade-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.folha {
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: 6px; padding: 1rem 1.1rem;
  box-shadow: var(--sombra); min-width: 0;
}
.folha > h2:first-child, .folha > h3:first-child { margin-top: 0; }
.rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-2); }
.grande { font: 500 2rem/1.1 var(--mono); font-variant-numeric: tabular-nums; }
.secao { margin-top: 2rem; }

/* tabelas e listas */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-2); }
th, td { padding: .45rem .5rem; border-bottom: 1px solid var(--linha); vertical-align: top; }
td.valor { text-align: right; font-family: var(--mono); white-space: nowrap; }
.rolar { overflow-x: auto; }
.pos { color: var(--verde); }
.neg { color: var(--carimbo); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: .55rem 0; border-bottom: 1px dashed var(--linha); }
.lista li:last-child { border-bottom: 0; }

/* personagens */
.ficha {
  display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; align-items: start;
  padding: .7rem .8rem; border: 1px solid var(--linha); border-radius: 5px; background: var(--papel);
  text-decoration: none; color: inherit;
}
a.ficha:hover { border-color: var(--oliva-2); }
.ficha .icone {
  grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 4px; display: grid; place-items: center;
  background: var(--papel-3); font: 600 .7rem var(--mono); color: var(--tinta-2);
}
.ficha b { font-weight: 600; }
.ficha .linha2 { font-size: .85rem; color: var(--tinta-2); }
.fichas { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.selo {
  display: inline-block; padding: .05rem .45rem; border-radius: 3px; font: 500 .72rem var(--mono);
  text-transform: uppercase; letter-spacing: .05em; border: 1px solid currentColor; white-space: nowrap;
}
.st-ativo { color: var(--verde); }
.st-recuperacao, .st-retornando, .st-em_transito { color: var(--ambar); }
.st-mia, .st-pow { color: var(--carimbo); }
.st-kia { color: var(--tinta); background: var(--papel-3); }
.st-aposentado { color: var(--cinza); }
.fase { color: var(--azul); }

/* formulários */
form { display: grid; gap: .8rem; }
label { display: grid; gap: .25rem; font-size: .88rem; font-weight: 500; }
input, select, textarea {
  font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linha);
  border-radius: 4px; padding: .5rem .6rem; min-width: 0; width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.linha-form { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
.marcar { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.marcar input { width: auto; }
button, .botao {
  font: 600 .9rem var(--fonte); color: var(--botao-texto); background: var(--botao); border: 1px solid rgba(0,0,0,.35);
  border-radius: 4px; padding: .55rem 1rem; cursor: pointer; text-decoration: none; display: inline-block; text-align: center;
}
button:hover, .botao:hover { background: var(--botao-2); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.secundario { background: transparent; color: var(--tinta); border-color: var(--linha); }
button.secundario:hover { background: var(--papel-3); }
button.perigo { background: var(--carimbo); border-color: #6d1d16; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.nota { font-size: .85rem; color: var(--tinta-2); padding: .6rem .8rem; border-left: 3px solid var(--ambar); background: var(--papel); border-radius: 0 4px 4px 0; }
.nota.fechada { border-left-color: var(--carimbo); }

/* tela de entrada */
.entrada { max-width: 560px; margin: 8vh auto 0; text-align: center; }
.entrada .folha { padding: 2rem 1.5rem; position: relative; }
.carimbo {
  display: inline-block; color: var(--carimbo); border: 3px double var(--carimbo); padding: .2rem .8rem;
  font: 1.1rem var(--maquina); letter-spacing: .15em; transform: rotate(-4deg); margin-bottom: 1rem; opacity: .85;
}
.botao-discord { background: #5865f2; color: #fff; border-color: #3c45a5; font-size: 1rem; padding: .75rem 1.4rem; }
.botao-discord:hover { background: #4752c4; }

/* linha do tempo */
.tempo { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--linha); }
.tempo li { position: relative; padding: 0 0 1rem .6rem; }
.tempo li::before {
  content: ""; position: absolute; left: -1.62rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--papel-2); border: 2px solid var(--oliva-2);
}
.tempo li.t-perda::before { border-color: var(--carimbo); }
.tempo li.t-resgate::before, .tempo li.t-objetivo::before { border-color: var(--verde); }
.tempo li.t-rodada::before { background: var(--oliva-2); }
.tempo .quando { font: .75rem var(--mono); color: var(--tinta-2); }
.marco-rodada { font-family: var(--maquina); font-size: 1.1rem; margin: 1.4rem 0 .6rem; }

/* abas do admin */
.abas { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--linha); }
.abas button { background: transparent; color: var(--tinta-2); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .5rem .8rem; }
.abas button.ativo { color: var(--tinta); border-bottom-color: var(--oliva); }
.contador { display: inline-block; min-width: 1.3rem; padding: 0 .3rem; border-radius: 9px; background: var(--carimbo); color: #fff; font: 600 .72rem var(--mono); text-align: center; }

.aviso {
  position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); max-width: calc(100% - 2rem);
  background: var(--tinta); color: var(--papel); padding: .65rem 1rem; border-radius: 5px; box-shadow: var(--sombra); z-index: 20;
}
.aviso.erro { background: var(--carimbo); color: #fff; }
.vazio { color: var(--tinta-2); font-style: italic; }
.carregando { color: var(--tinta-2); font-family: var(--maquina); }

@media (max-width: 640px) {
  .topo { gap: .5rem; }
  .topo { overflow: hidden; }
  .marca { min-width: 0; flex: 1; }
  .marca small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .menu { order: 3; flex: 1 1 100%; min-width: 0; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .rolar { max-width: 100%; }
  .menu a { white-space: nowrap; }
  h1 { font-size: 1.5rem; }
  .grande { font-size: 1.6rem; }
}