/* METALS: a pagina inteira e' uma interface do jogo.
   Fundo de terra escurecido como o menu, paineis cinzentos com o bisel do
   inventario, slots afundados, e uma fornalha onde as taxas viram lingotes. */

:root {
  --gui: #c6c6c6;
  --gui-lit: #ffffff;
  --gui-dim: #555555;
  --slot: #8b8b8b;
  --slot-dark: #373737;
  --ink: #3f3f3f;
  --shadow: #3f3f3f;

  --gold: #fcee4b;
  --gold-deep: #d9a334;
  --gold-shadow: #45410f;
  --iron: #dcdcdc;
  --iron-shadow: #3b3b3b;
  --xp: #80ff20;
  --xp-dark: #3f7f0f;
  --fire: #ff9a1f;
  --rare: #ff55ff;

  --pixel: 'Pixelify Sans', 'Trebuchet MS', system-ui, sans-serif;
  --tiny: 'Silkscreen', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0 0 92px;
  font-family: var(--pixel);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  /* O fundo do menu do jogo: terra em mosaico, escurecida. */
  background-color: #3a2a1c;
  background-image: url('/assets/tex-dirt.svg');
  background-size: 48px 48px;
  background-repeat: repeat;
  image-rendering: pixelated;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 5, .72);
  pointer-events: none;
  z-index: 0;
}

.world {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 46px 20px 40px;
}

/* ---------- painel de interface ---------- */

.gui {
  position: relative;
  background: var(--gui);
  border: 3px solid #000;
  box-shadow:
    inset 4px 4px 0 var(--gui-lit),
    inset -4px -4px 0 var(--gui-dim),
    0 6px 0 rgba(0, 0, 0, .35);
  padding: 22px 24px 26px;
  margin-bottom: 30px;
}
.gui-title {
  font-family: var(--pixel);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: .02em;
}

/* ---------- slots ---------- */

.slot {
  width: 46px;
  height: 46px;
  background: var(--slot);
  box-shadow:
    inset 3px 3px 0 var(--slot-dark),
    inset -3px -3px 0 var(--gui-lit);
  display: grid;
  place-items: center;
  flex: none;
}
.slot img {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, .32));
  transition: transform .15s;
}
.slot.big { width: 78px; height: 78px; }
.slot.big img { width: 60px; height: 60px; }
.eth {
  font-family: var(--pixel);
  font-size: 24px;
  font-weight: 700;
  color: #d7d7ff;
  text-shadow: 2px 2px 0 #2f2f55;
}

/* ---------- ecra de titulo ---------- */

.masthead { text-align: center; margin-bottom: 44px; }
.logo {
  font-family: var(--pixel);
  font-weight: 700;
  font-size: clamp(54px, 12vw, 116px);
  line-height: 1;
  margin: 0;
  letter-spacing: .04em;
  color: var(--gold);
  /* Extrusao em degraus: as letras do jogo sao blocos, nao tem curvas suaves. */
  text-shadow:
    3px 3px 0 var(--gold-deep),
    6px 6px 0 #8a6512,
    9px 9px 0 #4a3607,
    12px 12px 0 rgba(0, 0, 0, .45);
}
/* O texto amarelo torto do ecra inicial, que pulsa. */
.splash {
  display: inline-block;
  margin: 14px 0 0;
  font-family: var(--pixel);
  font-size: clamp(16px, 2.4vw, 23px);
  font-weight: 700;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--gold-shadow);
  transform: rotate(-14deg);
  animation: bob 1s ease-in-out infinite;
  cursor: default;
}
@keyframes bob {
  0%, 100% { transform: rotate(-14deg) scale(1); }
  50% { transform: rotate(-14deg) scale(1.09); }
}
.version {
  margin: 22px 0 0;
  font-family: var(--tiny);
  font-size: 11px;
  letter-spacing: .12em;
  color: #b9b0a4;
  text-shadow: 2px 2px 0 #000;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 48px;
}
.lede {
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 16px;
  color: #ffffff;
  text-shadow: 3px 3px 0 #000;
}
.lede .gold { color: var(--gold); text-shadow: 3px 3px 0 var(--gold-shadow); }
.lede .iron { color: var(--iron); text-shadow: 3px 3px 0 var(--iron-shadow); }
.sub {
  max-width: 46ch;
  margin: 0 0 26px;
  color: #cfc7ba;
  font-size: 16px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .8);
}

/* ---------- botoes do jogo ---------- */

.cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.mcbtn {
  display: inline-block;
  font-family: var(--pixel);
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  text-shadow: 2px 2px 0 var(--shadow);
  text-decoration: none;
  padding: 13px 26px;
  background: #8b8b8b;
  border: 3px solid #000;
  box-shadow:
    inset 3px 3px 0 #c6c6c6,
    inset -3px -3px 0 #4f4f4f,
    0 4px 0 rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: background .08s, transform .08s;
}
.mcbtn:hover { background: #a3a3c4; }
.mcbtn:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 #c6c6c6, inset -3px -3px 0 #4f4f4f; }
.mcbtn.primary { background: #4f7a35; }
.mcbtn.primary:hover { background: #63963f; }
.mcbtn[data-empty] { color: #d8d8d8; cursor: default; }
.mcbtn[data-empty]:hover { background: #8b8b8b; }

.socials { display: flex; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.socials a {
  font-family: var(--tiny);
  font-size: 11px;
  letter-spacing: .1em;
  color: #c9c1b4;
  text-decoration: none;
  text-shadow: 2px 2px 0 #000;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}
.socials a:hover { color: var(--gold); border-color: var(--gold); }

/* ---------- os blocos que flutuam ---------- */

.hero-art { margin: 0; text-align: center; }
.stack {
  position: relative;
  width: 100%;
  max-width: 330px;
  margin: 0 auto;
  aspect-ratio: 1;
}
.blk, .drop {
  position: absolute;
  image-rendering: pixelated;
  filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, .45));
}
.blk { width: 42%; height: auto; }
/* Uma pilha ligeiramente desalinhada, como blocos postos a mao. */
.b1 { left: 8%;  top: 4%;  animation: hover1 5.5s ease-in-out infinite; }
.b2 { left: 33%; top: 34%; width: 50%; animation: hover2 6.5s ease-in-out infinite; }
.b3 { left: 4%;  top: 58%; animation: hover3 7.5s ease-in-out infinite; }
.drop { width: 30%; }
.ing1 { right: 2%;  top: 16%; animation: spin1 4s ease-in-out infinite; }
.ing2 { right: 12%; bottom: 6%; animation: spin1 5s ease-in-out infinite .6s; }
@keyframes hover1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes hover2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes hover3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin1 {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}
.hero-art figcaption {
  margin-top: 16px;
  font-family: var(--tiny);
  font-size: 11px;
  letter-spacing: .1em;
  color: #b9b0a4;
  text-shadow: 2px 2px 0 #000;
}

/* ---------- os dois drops ---------- */

.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.tier {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
  transition: transform .12s;
}
.tier:hover { transform: translateY(-4px); }
.tier:hover .slot img { transform: scale(1.08) rotate(-5deg); }

/* O tooltip de um item: fundo quase preto, borda roxa, nome a cor da raridade. */
.tip {
  background: #16001c;
  border: 2px solid #2b0a4d;
  outline: 2px solid #12001a;
  padding: 14px 16px;
}
.tip h2 {
  font-family: var(--pixel);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
}
.tip h2.gold { color: var(--gold); text-shadow: 2px 2px 0 var(--gold-shadow); }
.tip h2.iron { color: var(--iron); text-shadow: 2px 2px 0 var(--iron-shadow); }
.tip .lore { margin: 0 0 12px; color: #b6a7ff; font-size: 15px; text-shadow: 2px 2px 0 #16001c; }
.tip .desc { margin: 0 0 12px; color: #cfcfcf; font-size: 14.5px; text-shadow: 2px 2px 0 #16001c; }
.tip .rare { margin: 0; color: var(--rare); font-size: 14px; text-shadow: 2px 2px 0 #3d0a3d; }
.tip .common { margin: 0; color: #9fd8ff; font-size: 14px; text-shadow: 2px 2px 0 #0d2b3d; }

/* ---------- crafting ---------- */

.craft-row {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.grid3 { display: grid; grid-template-columns: repeat(3, 46px); gap: 4px; }
/* A seta da receita, feita de dois blocos e nao de um caractere. */
.arrow { position: relative; width: 52px; height: 18px; flex: none; }
.arrow::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 34px; height: 8px;
  background: var(--slot-dark);
}
.arrow::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  border: 9px solid transparent;
  border-left: 16px solid var(--slot-dark);
}
.slot.out { box-shadow: inset 3px 3px 0 var(--slot-dark), inset -3px -3px 0 var(--gui-lit), 0 0 0 3px #6b6b6b; }

.steps { margin: 0 0 18px; padding-left: 26px; }
.steps li { margin-bottom: 9px; color: var(--ink); font-size: 16px; }
.steps b { color: #1f1f1f; }
.note {
  margin: 0;
  padding: 12px 16px;
  background: #a8a8a8;
  box-shadow: inset 3px 3px 0 var(--slot-dark), inset -3px -3px 0 var(--gui-lit);
  font-size: 15px;
  color: #1f1f1f;
}

/* ---------- fornalha ---------- */

.furnace-body { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; }
.furnace-slots { display: grid; justify-items: center; gap: 8px; flex: none; }
.fire {
  width: 30px;
  height: 30px;
  background: var(--slot-dark);
  display: grid;
  place-items: center;
}
.flame {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--fire);
  box-shadow: 0 -5px 0 -2px #ffd23f;
  animation: burn .55s steps(2) infinite alternate;
}
@keyframes burn { from { transform: scaleY(.72); } to { transform: scaleY(1); } }

.smelt { flex: 1; min-width: 240px; }
/* A barra de experiencia: verde, com o vazio escuro por baixo. */
.meter {
  height: 20px;
  background: #4a4a4a;
  box-shadow: inset 3px 3px 0 #2a2a2a, inset -3px -3px 0 #6f6f6f;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  width: 0;
  background: var(--xp);
  box-shadow: inset 0 -6px 0 var(--xp-dark);
  transition: width .9s steps(20);
}
.meter-label { margin: 12px 0 4px; font-size: 16px; color: #1f1f1f; }
.state {
  margin: 0;
  font-family: var(--tiny);
  font-size: 11px;
  letter-spacing: .1em;
  color: #4a4a4a;
}

.vault-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 3px solid #a0a0a0;
}
.vstat {
  background: #a8a8a8;
  box-shadow: inset 3px 3px 0 var(--slot-dark), inset -3px -3px 0 var(--gui-lit);
  padding: 12px 14px;
}
.vstat span {
  display: block;
  font-family: var(--tiny);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: #4a4a4a;
  margin-bottom: 5px;
}
.vstat b { font-size: 22px; font-weight: 700; color: #1f1f1f; }
.vstat.g b { color: #7a5c00; }
.vstat.s b { color: #45525c; }

/* ---------- a tua carteira ---------- */

.check-row { display: flex; gap: 12px; flex-wrap: wrap; }
#addr {
  flex: 1;
  min-width: 240px;
  font-family: var(--pixel);
  font-size: 16px;
  padding: 12px 14px;
  color: #ffffff;
  text-shadow: 2px 2px 0 var(--shadow);
  background: #0d0d0d;
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 #2a2a2a;
}
#addr:focus { outline: none; box-shadow: inset 3px 3px 0 #2a2a2a, 0 0 0 3px var(--gold); }
#addr::placeholder { color: #7a7a7a; }

.wallet-card {
  margin-top: 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  background: #a8a8a8;
  box-shadow: inset 3px 3px 0 var(--slot-dark), inset -3px -3px 0 var(--gui-lit);
  padding: 20px 22px;
  animation: pop .18s steps(3) both;
}
@keyframes pop { from { transform: scale(.94); } }
/* O item que te calhou, no seu slot, com o nome por baixo. */
.tier-mark {
  width: 92px;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.tier-mark .box {
  width: 78px;
  height: 78px;
  background: var(--slot);
  box-shadow: inset 3px 3px 0 var(--slot-dark), inset -3px -3px 0 var(--gui-lit);
  display: grid;
  place-items: center;
}
.tier-mark img { width: 58px; height: 58px; image-rendering: pixelated; }
.tier-mark b { font-size: 17px; font-weight: 700; text-align: center; }
.tier-mark.gold b { color: #7a5c00; }
.tier-mark.silver b { color: #45525c; }
.tier-mark.below b, .tier-mark.none b { color: #5a5a5a; }
.tier-mark .none-box { font-size: 30px; color: #5f5f5f; }

.wallet-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.wallet-facts div span {
  display: block;
  font-family: var(--tiny);
  font-size: 9.5px;
  letter-spacing: .1em;
  color: #4a4a4a;
  margin-bottom: 4px;
}
.wallet-facts div b { font-size: 20px; font-weight: 700; color: #1f1f1f; }
.hint { margin: 14px 0 0; font-size: 15px; color: #3a3a3a; min-height: 20px; }

/* ---------- o bau ---------- */

.ledger-body { font-size: 15px; color: var(--ink); }
table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-family: var(--tiny);
  font-size: 9.5px;
  letter-spacing: .1em;
  font-weight: 400;
  color: #4a4a4a;
  padding: 0 12px 10px 0;
  border-bottom: 3px solid #a0a0a0;
}
td { padding: 11px 12px 11px 0; border-bottom: 2px solid #b4b4b4; font-size: 15px; }
td a { color: #1f5fbf; text-decoration: none; }
td a:hover { color: #0d3f8f; text-decoration: underline; }
.amt-g { color: #7a5c00; font-weight: 700; }
.amt-s { color: #45525c; font-weight: 700; }

/* ---------- placas de aviso ---------- */

.signs { display: grid; gap: 16px; margin-top: 40px; }
.sign {
  /* Uma placa de madeira: tabuas escuras com o texto por cima. */
  background: #6b4a2a;
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 #8a6039, inset -3px -3px 0 #4a3018;
  padding: 16px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #efe3d2;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .55);
}
.sign b { color: #ffd98a; }
.stamp {
  margin: 8px 0 0;
  font-family: var(--tiny);
  font-size: 10px;
  letter-spacing: .12em;
  color: #a89e90;
  text-shadow: 2px 2px 0 #000;
}

/* ---------- hotbar ---------- */

.hotbar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  background: #1d1d1d;
  border: 3px solid #000;
  box-shadow: inset 3px 3px 0 #4a4a4a, inset -3px -3px 0 #101010, 0 5px 0 rgba(0, 0, 0, .45);
  padding: 4px;
}
.hotbar a, .hotbar span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: #8b8b8b;
  box-shadow: inset 3px 3px 0 var(--slot-dark), inset -3px -3px 0 #c6c6c6;
  margin: 0 2px;
  text-decoration: none;
  font-family: var(--tiny);
  font-size: 9px;
  letter-spacing: .04em;
  color: #1f1f1f;
  text-align: center;
  line-height: 1.25;
  padding: 4px;
  transition: transform .1s;
}
.hotbar a:hover { transform: translateY(-4px); background: #a3a3c4; }
.hotbar img { width: 34px; height: 34px; image-rendering: pixelated; }

/* ---------- aparecer ---------- */

/* Sem JavaScript a pagina aparece na mesma, por isso o estado escondido so e'
   aplicado quando o script confirma que esta a correr. */
.js .reveal { opacity: 0; transform: translateY(16px); }
.reveal.in {
  opacity: 1;
  transform: none;
  /* Suave, e nao em degraus. Um steps() aqui faz a opacidade e a posicao darem
     seis saltos em 400ms, o que se le como o site a carregar a cinco frames por
     segundo em vez de uma entrada. Os degraus ficam onde parecem maquina: a
     chama e a barra a encher. */
  transition: opacity .35s ease-out, transform .35s ease-out;
}
/* O que ja esta no ecra quando a pagina abre nao se anima de todo: aparece.
   Os primeiros dois segundos sao os que contam, e nenhuma entrada vale um
   arranque que parece lento. */
.reveal.in.now { transition: none; }
.d1.in { transition-delay: .1s; }
.d2.in { transition-delay: .2s; }
.d3.in { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .splash, .flame, .blk, .drop { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- estreito ---------- */

@media (max-width: 900px) {
  body { font-size: 16px; padding-bottom: 84px; }
  .world { padding: 28px 14px 30px; }
  .hero { grid-template-columns: 1fr; gap: 28px; }
  .hero-art { order: -1; max-width: 260px; margin: 0 auto; }
  .tiers { grid-template-columns: 1fr; }
  .tier { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .gui { padding: 18px 16px 20px; }
  .logo { text-shadow: 2px 2px 0 var(--gold-deep), 4px 4px 0 #8a6512, 6px 6px 0 #4a3607; }
  .wallet-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hotbar a, .hotbar span { width: 46px; height: 46px; font-size: 8px; }
  .hotbar img { width: 28px; height: 28px; }
}