/* Site do jogo (cadastro, login, espera, painel): a mesma linguagem da interface do jogo (pergaminho,
   madeira, brasa) sobre a vila da tela de título à noite. Tema escuro único, como o site principal. */
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/alegreya-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/alegreya-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Alegreya"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/alegreya-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Almendra"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/almendra-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Almendra"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/almendra-latin-700-normal.woff2") format("woff2"); }

:root {
  --night: #0b0d14; --night-2: #121623; --wood: #4a2f1c; --wood-2: #2a1a10; --parch: #e9dcc0; --parch-2: #d6c6a4;
  --ink: #2a1a10; --ink-2: #5a4630; --linen: #efe6d2; --linen-dim: #b8ad96; --ember: #d9792e; --ember-2: #f4a94f;
  --moss: #4e6b37; --rowan: #a63a2e; --gold: #c9973a;
  --title: "Almendra", "Alegreya", Georgia, serif; --serif: "Alegreya", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--night) url("art/title_village.png") center / cover no-repeat fixed;
  image-rendering: pixelated;
  color: var(--linen); font: 18px/1.5 var(--serif);
  display: flex; flex-direction: column; min-height: 100vh;
}
body::before { /* noite por cima da vila: o cartão fica legível */
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(11, 13, 20, .55) 0%, rgba(5, 6, 10, .92) 100%);
}
a { color: var(--ember-2); }
a:hover { color: #ffd08a; }

.top { display: flex; align-items: center; gap: 12px; padding: 14px max(16px, env(safe-area-inset-left)); }
.top img { width: 40px; height: 40px; }
.top .name { font-family: var(--title); font-size: 20px; color: var(--linen); text-decoration: none; letter-spacing: .3px; }
.badge { margin-left: auto; font: 700 13px var(--serif); letter-spacing: 1.5px; text-transform: uppercase; color: var(--wood-2);
  background: var(--ember-2); border: 2px solid var(--wood); padding: 2px 10px; }

main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card {
  width: 100%; max-width: 440px; color: var(--ink);
  border: 52px solid transparent; border-image: url("art/frame_parchment.png") 26 fill / 52px round;
  image-rendering: pixelated;
}
.card.wide { max-width: 1100px; }
.card > * { image-rendering: auto; }
.card h1 { font: 700 30px/1.15 var(--title); margin: -14px 0 6px; color: var(--wood); text-align: center; }
.card .lead { margin: 0 0 18px; text-align: center; color: var(--ink-2); }
.knot { display: block; margin: 4px auto 16px; width: 126px; height: 15px; image-rendering: pixelated; }

form { display: grid; gap: 14px; }
label { display: grid; gap: 4px; font-weight: 700; color: var(--wood); font-size: 16px; }
input[type=email], input[type=password], input[type=text], input[type=search] {
  font: 18px var(--serif); color: var(--ink); background: #f6eedb; border: 2px solid #8a6a44; padding: 9px 11px; width: 100%; border-radius: 0;
}
input:focus { outline: 3px solid var(--ember); outline-offset: 0; border-color: var(--wood); }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); font-size: 16px; }
.check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--ember); flex: none; }
.check a, .card a { color: #8a3f12; }

.btn {
  font: 700 19px var(--title); letter-spacing: .4px; cursor: pointer; text-decoration: none; text-align: center;
  color: var(--wood-2); background: linear-gradient(#f4a94f, #d9792e); border: 3px solid var(--wood); padding: 10px 18px;
  box-shadow: inset 0 -3px 0 rgba(74, 47, 28, .35), 0 2px 0 var(--wood-2); display: inline-block;
}
.btn:hover { background: linear-gradient(#ffc06a, #e98a3a); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(74, 47, 28, .35); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.ghost { background: transparent; color: var(--wood); box-shadow: none; border-width: 2px; }
.btn.small { font-size: 15px; padding: 5px 10px; }
.btn.ok { background: linear-gradient(#8fb36a, #5f8540); color: #142008; }
.btn.no { background: linear-gradient(#d0705f, #a63a2e); color: #fff1e8; }

.msg { padding: 10px 12px; border: 2px solid; font-size: 16px; display: none; }
.msg.show { display: block; }
.msg.err { background: #f3d6c8; border-color: var(--rowan); color: #5e1a10; }
.msg.ok { background: #dfe8cf; border-color: var(--moss); color: #22340f; }
.links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 16px; margin-top: 4px; }
.center { text-align: center; }
.big-icon { display: block; margin: 0 auto 8px; width: 64px; height: 64px; image-rendering: pixelated; }
.muted { color: var(--ink-2); font-size: 15px; }
.hidden { display: none !important; }

footer { text-align: center; padding: 14px 16px 20px; font-size: 14px; color: var(--linen-dim); }
footer a, footer span { color: var(--linen-dim); margin: 0 8px; }

/* Painel */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.toolbar input { max-width: 260px; }
.tab { font: 700 15px var(--serif); background: #efe3c6; border: 2px solid #8a6a44; color: var(--wood); padding: 5px 10px; cursor: pointer; }
.tab.on { background: var(--wood); color: var(--parch); }
.stats { margin-left: auto; color: var(--ink-2); font-size: 15px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 8px 8px; border-bottom: 1px solid #c4ae86; vertical-align: middle; }
th { color: var(--wood); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
td.actions { white-space: nowrap; text-align: right; }
td.actions .btn { margin-left: 4px; }
.pill { font-size: 13px; font-weight: 700; padding: 2px 8px; border: 2px solid; white-space: nowrap; }
.pill.pending { color: #7a4b0c; border-color: #c9973a; background: #f6e3b6; }
.pill.approved { color: #22340f; border-color: var(--moss); background: #dfe8cf; }
.pill.blocked { color: #5e1a10; border-color: var(--rowan); background: #f3d6c8; }
.empty { text-align: center; padding: 24px; color: var(--ink-2); }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .card { border-width: 34px; border-image-width: 34px; }
  .card h1 { font-size: 25px; margin-top: -6px; }
  .top .name { font-size: 16px; }
  td.actions .btn { margin: 2px 0 2px 4px; }
}