/*
 * Tema "Pedra e Tocha" — os menus no mesmo mundo da masmorra.
 * Carregado depois de style.css: só muda a aparência.
 *
 * Ideia: painéis como lajes de pedra com cantos em degrau (pixel), luz de tocha
 * nos botões que dá para comprar, e uma fonte em pixel feita para o jogo
 * (assets/fonts/idle-pixel.ttf) nos títulos e números. Cada menu tem a sua cor.
 */

@font-face {
  font-family: 'Idle Pixel';
  src: url('assets/fonts/idle-pixel.ttf') format('truetype');
  font-display: swap;
}

:root {
  --stone-0: #120f17;   /* fundo da laje */
  --stone-1: #1d1824;   /* blocos */
  --stone-2: #2b2433;   /* bordas e blocos em relevo */
  --stone-hi: #4a3f57;  /* luz na aresta de cima */
  --parchment: #efe4cc; /* texto principal (quente, não azulado) */
  --dust: #a99c8a;      /* texto secundário */
  --torch: #ffb347;     /* ação possível, ouro */
  --torch-deep: #8a4b12;
  --ember: #d9532b;     /* perigo */
  --menu: var(--torch); /* cor do menu aberto */
  --pixel: 'Idle Pixel', ui-monospace, monospace;

  --panel: var(--stone-0);
  --panel-2: var(--stone-1);
  --border: var(--stone-2);
  --text: var(--parchment);
  --muted: var(--dust);
  --gold: var(--torch);
}

/* Cada menu com a sua cor (emblema, título, detalhes). */
#panel[data-menu="upgrades"] { --menu: #ffb347; }
#panel[data-menu="hero"] { --menu: #7fd4ff; }
#panel[data-menu="items"] { --menu: #e8c46a; }
#panel[data-menu="achievements"] { --menu: #d8c7a0; }
#panel[data-menu="prestige"] { --menu: #c9a6ff; }
#panel[data-menu="pvp"] { --menu: #ff6b6b; }
#panel[data-menu="tower"] { --menu: #b388ff; }
#panel[data-menu="ranking"] { --menu: #f5c542; }
#panel[data-menu="shop"] { --menu: #7cf3ff; }
#panel[data-menu="mail"] { --menu: #ffcf8a; }
#panel[data-menu="options"] { --menu: #b9b0a2; }

/* Cantos em degrau, como os sprites. */
.px-steps,
#panel,
#tabs::before,
.news-box,
.modal-box {
  clip-path: polygon(
    0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0,
    calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px)
  );
}

/* ---------- Barra do topo ---------- */
#stats {
  background: linear-gradient(var(--stone-1), var(--stone-0));
  border-bottom: 2px solid #000;
  box-shadow: inset 0 -2px 0 var(--stone-2);
}
#stats .label {
  text-transform: none;
  letter-spacing: 0;
  color: var(--dust);
}
#stats .value {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.1;
}

/* ---------- Painel (laje de pedra) ---------- */
#panel {
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--menu) 9%, transparent), transparent 60%),
    var(--stone-0);
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}
/* A moldura (fica por dentro do recorte em degrau). */
#panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px solid var(--stone-2);
  box-shadow: inset 0 2px 0 var(--stone-hi), inset 0 -3px 0 #000;
  z-index: 2;
}

.sheet-head {
  border-bottom: none;
  padding: 12px 14px 10px;
  background: repeating-linear-gradient(90deg, var(--stone-2) 0 6px, transparent 6px 10px) bottom / 100% 2px no-repeat;
}
.sheet-head h2,
#sheet-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 20px;
  color: var(--menu);
  letter-spacing: 0.02em;
}
.sheet-sigil {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #1a1206;
  background: var(--menu);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.35);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
}
.sheet-sigil svg { stroke-width: 2.4; }

.panel-body h2,
.tab-panel h2 {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 20px;
  color: var(--menu);
}

.label,
.upgrade-group,
.forge-title {
  text-transform: none;
  letter-spacing: 0;
}
.upgrade-group {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 20px;
  margin-top: 10px;
}
.panel-head { border-bottom: none; }
.panel-head .label { font-size: 13px; color: var(--dust); }

/* ---------- Botões: blocos que afundam ao tocar ---------- */
button {
  background: var(--stone-1);
  border: 2px solid var(--stone-2);
  border-radius: 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 3px 0 #000;
  transition: transform 0.05s, box-shadow 0.05s;
}
button:not(:disabled):hover { border-color: var(--stone-hi); }
button:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 1px 0 #000;
}
button:focus-visible { outline: 2px solid var(--torch); outline-offset: 2px; }
button.primary {
  color: #1a1206;
  background: var(--menu);
  border-color: color-mix(in srgb, var(--menu) 60%, #000);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 3px 0 #000;
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 20px;
  padding: 8px 14px 10px;
}
button.primary:disabled {
  color: var(--dust);
  background: var(--stone-1);
  border-color: var(--stone-2);
  box-shadow: 0 3px 0 #000;
  opacity: 0.7;
}
.icon-btn { box-shadow: none; border-color: transparent; background: none; }

/* Botões pequenos de escolha (x1 / x10 / Máx, abas do inventário) */
#buy-amount button {
  font-family: var(--pixel);
  font-size: 20px;
  font-weight: 400;
  padding: 2px 10px 4px;
}
#buy-amount button.active,
.seg-tabs button.active {
  color: #1a1206;
  background: var(--menu);
  border-color: color-mix(in srgb, var(--menu) 60%, #000);
}

/* ---------- Melhorias: a tocha acende quando dá para comprar ---------- */
.upgrade {
  position: relative;
  overflow: hidden;
  padding: 10px 12px 12px;
  background: var(--stone-1);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05), 0 3px 0 #000;
}
/* Barrinha de quanto do custo você já tem */
.upgrade::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--afford, 0) * 100%);
  background: var(--torch-deep);
}
.upgrade:not(:disabled)::after { background: var(--torch); }
.upgrade:disabled { opacity: 1; }
.upgrade:disabled .name,
.upgrade:disabled .desc { opacity: 0.75; }
.upgrade .level {
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--dust);
  padding: 1px 4px 2px;
  margin-left: 6px;
  border: 1px solid var(--stone-2);
  vertical-align: 2px;
}
.upgrade .cost {
  font-family: var(--pixel);
  font-weight: 400;
  font-size: 20px;
  padding: 4px 10px 6px;
  color: var(--dust);
  background: #0c0a10;
  border: 2px solid var(--stone-2);
}
.upgrade:not(:disabled) .cost {
  color: #1a1206;
  background: var(--torch);
  border-color: var(--torch-deep);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0 12px rgba(255, 179, 71, 0.35);
}
.upgrade.class-upgrade { border-left: 2px solid var(--stone-2); box-shadow: inset 4px 0 0 var(--class-color), inset 0 2px 0 rgba(255, 255, 255, 0.05), 0 3px 0 #000; }

/* Blocos de lista (talentos, cartas, missões) com o mesmo relevo */
.talent,
.mail-card,
.comp-card,
.shop-item,
.pc-box {
  border-radius: 0;
  border-width: 2px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.05), 0 3px 0 #000;
}
.pc-value { font-family: var(--pixel); font-weight: 400; font-size: 30px; }
#souls-summary { color: var(--menu); }

/* ---------- Barra de menus ---------- */
/* O recorte em degrau fica só no fundo (::before): se fosse na barra, cortaria o menu "Mais", que abre acima dela. */
#tabs {
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 6px;
}
#tabs::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--stone-0);
  pointer-events: none;
  border: 2px solid var(--stone-2);
  box-shadow: inset 0 2px 0 var(--stone-hi), inset 0 -3px 0 #000;
}
#tabs button {
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--dust);
}
#tabs button.active {
  color: var(--torch);
  background: color-mix(in srgb, var(--torch) 12%, transparent);
  border-radius: 0;
  box-shadow: inset 0 -3px 0 var(--torch);
}
#tabs button.active svg { filter: drop-shadow(0 0 6px rgba(255, 179, 71, 0.55)); }
#tabs .more-menu { border-radius: 0; border-width: 2px; box-shadow: 0 4px 0 #000; }

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}