/* Aparencia comum das duas paginas (index.html e painel.html): cores, fundo, janelas, botoes, campos e o logo.
   Para mudar as cores do site inteiro, troque os valores do :root. */
:root {
  --texto:#e9e6dc; --apagado:#9ba1af; --ouro:#f2c94c; --ouro2:#b9801a; --amarelo:#ffe14d;
  --janela1:#2b2f3b; --janela2:#20232c; --dentro:#15171d; --claro:#525a6c; --escuro:#12141a;
  --tit:'Cinzel', Georgia, 'Times New Roman', serif;      /* letra dos titulos e do logo (vem do Google Fonts; sem internet cai na Georgia) */
  --pedra:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.6  0 0 0 0 0.7  0 0 0 0.10 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
* { box-sizing:border-box; }
html, body { margin:0; color:var(--texto); font-family:Verdana, Tahoma, sans-serif; font-size:12px; }
html { background:#0f1116; }
body { min-height:100vh; padding:0 0 40px;
  background:var(--pedra), radial-gradient(1100px 420px at 50% -80px, rgba(242,201,76,.10), rgba(242,201,76,0) 70%), linear-gradient(180deg, #1b1e27 0, #111319 600px, #0f1116 100%); }
[hidden] { display:none !important; }

/* janelas e pecas: o jeito do client do Tibia, em tom escuro para as cenas coloridas aparecerem */
.janela { background:var(--pedra), linear-gradient(180deg, var(--janela1), var(--janela2)); border:1px solid #000;
  box-shadow:inset 1px 1px 0 var(--claro), inset -1px -1px 0 var(--escuro), 0 6px 16px rgba(0,0,0,.45); }
.titulo { font-weight:700; color:#f0e7c9; text-shadow:1px 1px 0 #000; padding:5px 9px 6px; background:linear-gradient(180deg, #3b4152, #272b36);
  border:1px solid #000; box-shadow:inset 1px 1px 0 #5c6477; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fundo { background:var(--dentro); border:1px solid; border-color:#090a0d #3b4050 #3b4050 #090a0d; }

button, select, input, a.botao { font:inherit; color:var(--texto); }
button, a.botao { cursor:pointer; padding:5px 13px; background:linear-gradient(180deg, #505768, #363b49); border:0; border-radius:2px; text-decoration:none; display:inline-block;
  box-shadow:0 0 0 1px #000, inset 1px 1px 0 #7a8398, inset -1px -1px 0 #23262f; text-shadow:1px 1px 0 #000; font-weight:700; white-space:nowrap; }
button:hover, a.botao:hover { filter:brightness(1.15); }
button:active, a.botao:active { box-shadow:0 0 0 1px #000, inset 1px 1px 0 #23262f, inset -1px -1px 0 #7a8398; }
button:disabled { opacity:.45; cursor:default; filter:none; }
.azul { background:linear-gradient(180deg, #3f7fd1, #25508c) !important; }
.verde { background:linear-gradient(180deg, #3fa552, #236b31) !important; }
.perigo { background:linear-gradient(180deg, #b0483a, #6e261d) !important; }
.ouro { background:linear-gradient(180deg, #ffe27a, #e0a82a 55%, #b9801a) !important; color:#2a1c00 !important; text-shadow:0 1px 0 rgba(255,255,255,.45) !important;
  box-shadow:0 0 0 1px #000, inset 1px 1px 0 #fff3c0, inset -1px -1px 0 #8a5c0c, 0 0 14px rgba(242,201,76,.35) !important; }
input, select { height:26px; padding:0 7px; background:#14161c; border:1px solid; border-color:#090a0d #3b4050 #3b4050 #090a0d; border-radius:2px; outline:0; }
input:focus, select:focus { border-color:var(--ouro); }
canvas { image-rendering:pixelated; }

/* o topo e o logo */
header { position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:9px 16px; background:var(--pedra), linear-gradient(180deg, #2a2e3a, #1c1f27);
  border-bottom:1px solid #000; box-shadow:inset 0 -1px 0 #454c5c, 0 6px 18px rgba(0,0,0,.55); }
.marca { display:flex; align-items:center; gap:9px; margin-right:10px; text-decoration:none; }
.marca svg { width:34px; height:34px; flex:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.marca b { font-family:var(--tit); font-weight:900; font-size:22px; letter-spacing:1px; white-space:nowrap; background:linear-gradient(180deg, #fff6d0, #f2c94c 55%, #c08a1c); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(1px 1px 0 #000); }
.marca small { align-self:flex-end; margin:0 0 4px -3px; color:var(--apagado); font-size:11px; white-space:nowrap; }
.espaco { flex:1; }
.selo { padding:1px 6px; color:#2a1c00; background:linear-gradient(180deg, #ffe27a, #e0a82a); border:1px solid #000; font-size:10px; font-weight:700; text-shadow:none; white-space:nowrap; }
.aviso { margin:10px 16px 0; padding:6px 10px; color:#1a1400; background:#e9c84a; border:1px solid #000; font-weight:700; }
.aviso.erro { background:#d06a5a; }

/* janela por cima da pagina (detalhes do servidor, confirmar compra) */
.sobre { position:fixed; inset:0; z-index:10; display:none; align-items:center; justify-content:center; background:rgba(5,6,9,.78); padding:14px; }
.sobre.aberto { display:flex; }
.sobre > .janela { width:min(760px, 100%); max-height:100%; overflow:auto; padding:2px; }

@media (max-width:640px) {
  header { position:static; padding:8px 10px; gap:8px; }
  .marca b { font-size:18px; } .marca svg { width:28px; height:28px; }
  .aviso { margin:8px 10px 0; }
}