/* Tema: molduras do UI Pack (Kenney, CC0). Painéis e cards usam 9-slice do panel_brown (moldura de
   madeira) com interior escuro; botões e barras são imagens. Carregado depois de estilo.css: só muda a
   pele, o layout fica em estilo.css. */
:root {
  --fundo: #15111f;
  --madeira: #9a7550;
  --madeira-escura: #5a3f2a;
  --pergaminho: #d9c38f;
  --texto-pergaminho: #3a2a14;
}
body { background: #15111f url("assets/ui/fundo.svg"); }

.painel, #modal-corpo .card, .card, dialog, .login-caixa, .janela-campo, .atlas-mar, .atlas-banner, .oferta, .perfil-cabeca, .moeda {
  border: 14px solid transparent; border-image: url("assets/ui/panel_brown.png") 14 round;
  border-radius: 0; background: linear-gradient(180deg, #1f1a33, #171326) padding-box; box-shadow: 0 6px 0 #0a0810, 0 12px 24px #0008;
}
.painel::before { display: none; }
#modal-corpo .card, .card { border-width: 12px; padding: 6px 8px; }
.moeda { border-width: 10px; height: auto; padding: 0 4px 0 2px; }
.atlas-mar, .janela-campo { background: #0b0f12 padding-box; }
.janela-campo.pip, .janela-campo.min { border-width: 10px; }
.card.ativo, .card.reserva, .painel.roxo { border-image-source: url("assets/ui/panel_blue.png"); }
.painel.roxo { background: linear-gradient(180deg, #2a1e46, #1d1533) padding-box; }
.oferta { border-image-source: url("assets/ui/panel_beige.png"); background: linear-gradient(120deg, #4a2412, #2a1530 70%) padding-box; }
.perfil-cabeca { border-image-source: url("assets/ui/panel_beige.png"); }

/* títulos em faixa de pergaminho */
.painel > h3:first-child, .painel-topo h3, .pagina-topo h2, .mundo-titulo, .loja-cat {
  color: var(--texto-pergaminho); text-shadow: none; font-size: 15px;
  padding: 6px 14px 4px; margin: -4px 0 10px; display: inline-flex; align-items: center; gap: 8px;
  border: 8px solid transparent; border-image: url("assets/ui/buttonLong_beige.png") 12 fill stretch;
}
.painel-topo h3 { margin: 0; }
.pagina-topo h2 { font-size: 22px; }
.painel > h3::before, .painel-topo h3::before { display: none; }

/* botões de madeira; primário em pergaminho; destaque azul */
button {
  border: 9px solid transparent; border-image: url("assets/ui/buttonLong_brown.png") 12 fill stretch; border-radius: 0;
  background: none; box-shadow: none; color: #fff3d6; text-shadow: 0 1px 0 #3a2a14; padding: 2px 8px; min-height: 36px;
  transition: none;
}
button:hover:not(:disabled) { filter: brightness(1.12); border-color: transparent; }
button:active:not(:disabled) { border-image-source: url("assets/ui/buttonLong_brown_pressed.png"); transform: translateY(2px); box-shadow: none; }
button.primario { border-image-source: url("assets/ui/buttonLong_beige.png"); color: var(--texto-pergaminho); text-shadow: 0 1px 0 #fff8; box-shadow: none; }
button.primario:active:not(:disabled) { border-image-source: url("assets/ui/buttonLong_beige_pressed.png"); }
button.destaque, button.verde { border-image-source: url("assets/ui/buttonLong_blue.png"); color: #fff; text-shadow: 0 1px 0 #1b3a6b; box-shadow: none; }
button.destaque:active:not(:disabled), button.verde:active:not(:disabled) { border-image-source: url("assets/ui/buttonLong_blue_pressed.png"); }
button.mini { min-height: 30px; padding: 0 6px; border-width: 7px; font-size: 12px; }
button.link, .painel-topo .link { border: 0; border-image: none; background: none; color: var(--acento-2); text-shadow: none; min-height: 0; padding: 0; }
.menu-item { border: 0; border-image: none; min-height: 0; padding: 6px 10px; text-shadow: none; color: #d8ccb0; }
.menu-item:active:not(:disabled) { border-image: none; transform: none; }
.menu-item.sel { border: 7px solid transparent; border-image: url("assets/ui/buttonLong_beige.png") 12 fill stretch; color: var(--texto-pergaminho); padding: 1px 4px; box-shadow: none; }
.menu-item.sel .selo { background: #7a2508; color: #fff; }
.janela-botoes button, .moeda button, .x { min-height: 30px; width: 34px; padding: 0; border-width: 7px; }
.moeda button { border-image-source: url("assets/ui/buttonSquare_beige.png"); color: var(--texto-pergaminho); }
.abas button.sel, .chat-abas button.sel { border-image-source: url("assets/ui/buttonLong_beige.png"); color: var(--texto-pergaminho); text-shadow: 0 1px 0 #fff8; box-shadow: none; }
.ilha, .ilha:active:not(:disabled) { border: 0; border-image: none; min-height: 0; transform: none; }

/* barras de HP/XP do pack */
.barra { height: 16px; border: 5px solid transparent; border-image: url("assets/ui/barBack_horizontalMid.png") 5 fill stretch; border-radius: 0; background: none; box-shadow: none; position: relative; overflow: visible; }
.barra > i { position: absolute; left: -5px; top: -5px; bottom: -5px; min-width: 10px; height: auto; box-sizing: content-box; border: 5px solid transparent; border-image: url("assets/ui/barGreen_horizontalMid.png") 5 fill stretch; background: none; box-shadow: none; }
.barra.xp > i { border-image-source: url("assets/ui/barBlue_horizontalMid.png"); }
.barra.acento > i, .barra.hp-medio > i { border-image-source: url("assets/ui/barYellow_horizontalMid.png"); }
.barra.hp-baixo > i { border-image-source: url("assets/ui/barRed_horizontalMid.png"); }
.menu-perfil .barra { height: 10px; border-width: 3px; }
.menu-perfil .barra > i { left: -3px; top: -3px; bottom: -3px; border-width: 3px; }

/* interiores em madeira escura / pergaminho */
.stats div, .frag div, .item, .golpes li, .atlas-hunt .nv, .passe-dias div { border: 6px solid transparent; border-image: url("assets/ui/panelInset_brown.png") 8 fill stretch; border-radius: 0; background: none; box-shadow: none; }
.item.sel { border-image-source: url("assets/ui/panelInset_beige.png"); }
.item.sel b, .item.sel span { color: var(--texto-pergaminho); }
.passe-dias .hoje { border-image-source: url("assets/ui/panelInset_beige.png"); background: none; color: var(--texto-pergaminho); box-shadow: none; }
.passe-dias .feito { border-image-source: url("assets/ui/panelInset_blue.png"); background: none; color: #dfe8ff; }
.passe-dias .futuro { background: none; color: #a48cc0; }

.menu { position: relative; background: linear-gradient(180deg, #1d1730, #120e1d); border-right: 0; box-shadow: 4px 0 18px #0008; }
.menu::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 6px; background: url("assets/ui/panelInset_brown.png") center / 100% 100%; }
.topo { background: linear-gradient(180deg, #221b38, #171226); border-bottom: 0; box-shadow: 0 2px 0 #5a3f2a, 0 6px 0 #0a0810; }
.menu-perfil { border: 10px solid transparent; border-image: url("assets/ui/panel_brown.png") 14 round; border-radius: 0; background: #171326 padding-box; box-shadow: none; }
.menu-perfil.sel, .menu-perfil:hover { filter: brightness(1.1); border-color: transparent; }
.chip { border-radius: 4px; }
input, select { border: 2px solid #5a3f2a; background: #0f0c18; border-radius: 6px; }
.toast { border: 10px solid transparent; border-image: url("assets/ui/panel_beige.png") 14 round; border-radius: 0; background: #d9c38f padding-box; color: var(--texto-pergaminho); box-shadow: 0 8px 20px #000a; }
.toast.erro { border-image-source: url("assets/ui/panel_brown.png"); background: #3a1e26 padding-box; color: #ffd9d9; }
.toast small { color: #5a4a2a; }
dialog::backdrop { background: #000c; }
.modal-topo { border-bottom: 2px solid #5a3f2a; }
.loja .card .ico, .produto .ico, .retrato, .perfil-cabeca .avatar, .menu-perfil .avatar { border: 6px solid transparent; border-image: url("assets/ui/panelInset_brown.png") 8 fill stretch; border-radius: 0; background: radial-gradient(circle at 50% 35%, #3a3058, #0a0810) padding-box; box-shadow: none; }

/* títulos de faixa: sempre texto escuro sobre o pergaminho (inclusive no painel roxo) e fonte legível —
   a Pixelify em 15 px confunde 2/8/0; ela fica só nos títulos grandes de página */
.painel > h3:first-child, .painel-topo h3, .mundo-titulo, .loja-cat, .painel.roxo > h3:first-child, .painel.roxo .painel-topo h3 {
  color: var(--texto-pergaminho); font-family: Rubik, system-ui, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.pagina-topo h2 { font-family: var(--pixel); font-size: 22px; }
.painel-topo .link { font-weight: 600; }

/* selects com a mesma moldura dos itens (seta própria; o nativo ficava branco e sem tema) */
select {
  appearance: none; -webkit-appearance: none; border: 7px solid transparent; border-image: url("assets/ui/panelInset_brown.png") 8 fill stretch;
  border-radius: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23e8d9a8' stroke-width='2'/></svg>") no-repeat right 6px center;
  color: #fff3d6; padding: 2px 26px 2px 6px; min-height: 34px; font-weight: 600; cursor: pointer;
}
select:focus { outline: none; filter: brightness(1.15); }
select option { background: #1f1a33; color: #fff3d6; font-weight: 500; }
input { border: 7px solid transparent; border-image: url("assets/ui/panelInset_brown.png") 8 fill stretch; border-radius: 0; background: none; color: #fff3d6; min-height: 34px; padding: 2px 6px; }
input:focus { outline: none; box-shadow: inset 0 0 0 2px #d9a441; border-color: transparent; }
input[type=checkbox], input[type=radio] { border: 0; border-image: none; min-height: 0; accent-color: #d9a441; }

/* botões de zoom da barra do campo e botão de som do menu */
.janela-botoes button.zoom { font: 700 18px/1 Rubik, sans-serif; color: #fff3d6; }
.menu-rodape { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 6px 4px 0; }
.menu-rodape .online { margin: 0; }
#btn-som { min-height: 30px; width: 36px; padding: 0; border-width: 7px; }
#btn-som.mudo { opacity: .6; }
/* placeholder legível sobre a moldura marrom (o padrão do navegador some) */
input::placeholder { color: #e0cfa6; opacity: .75; }
.menu-item.sair { color: #e8a6a0; }
/* splash: xadrez do fundo e moldura de madeira */
.splash { background: #3f62e0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48'><rect width='24' height='24' fill='%234a6ce8'/><rect x='24' y='24' width='24' height='24' fill='%234a6ce8'/></svg>"); }
.splash-caixa { border: 14px solid transparent; border-image: url("assets/ui/panel_brown.png") 14 round; background: linear-gradient(180deg, #1f1a33, #171326) padding-box; box-shadow: 0 10px 0 #0a0810, 0 24px 48px #0008; }