/* Visual compartilhado: GUI do Minecraft (fonte do jar, botoes 9-slice, slots, paineis).
   --px = tamanho de 1 pixel do Minecraft na tela. */
@font-face {
  font-family: 'Minecraft';
  /* woff2 (31 KB) primeiro; o ttf (494 KB) so pra navegador muito antigo. As paginas fazem preload do woff2 */
  src: url('assets/font/minecraft.woff2') format('woff2'), url('assets/font/minecraft.ttf') format('truetype');
  font-display: block;
}

:root {
  --px: 4px;
  --gui: #c6c6c6;
  --gui-dark: #555555;
  --gui-light: #ffffff;
  --text: #ffffff;
  --text-shadow: #3f3f3f;
  --text-gui: #404040;
  --yellow: #ffff55;
  --green: #55ff55;
  --red: #ff5555;
  --aqua: #55ffff;
  --gray: #aaaaaa;
  --bg: #1d1712;
}

* { box-sizing: border-box; }

/* celular: sem atraso/zoom de duplo toque e sem o flash azul ao tocar */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Minecraft', monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

img, .pix { image-rendering: pixelated; }

/* hidden sempre esconde, mesmo em elemento com display proprio (botoes, flex...) */
[hidden] { display: none !important; }

.mc-text { text-shadow: var(--px) var(--px) 0 var(--text-shadow); }
.mc-yellow { color: var(--yellow); text-shadow: var(--px) var(--px) 0 #3f3f15; }
.mc-green { color: var(--green); text-shadow: var(--px) var(--px) 0 #153f15; }
.mc-red { color: var(--red); text-shadow: var(--px) var(--px) 0 #3f1515; }
.mc-gray { color: var(--gray); text-shadow: var(--px) var(--px) 0 #2a2a2a; }
.mc-aqua { color: var(--aqua); text-shadow: var(--px) var(--px) 0 #153f3f; }

/* fundo de terra escura das telas de menu */
.mc-dirt {
  background-color: #2b2118;
  background-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)), url('assets/gui/jar/dirt.png');
  background-size: auto, calc(var(--px) * 16 * 2) calc(var(--px) * 16 * 2);
  image-rendering: pixelated;
}

/* botao padrao (widget/button.png, nine_slice borda 3) */
.mc-btn {
  font: inherit;
  font-size: calc(var(--px) * 8);
  color: var(--text);
  text-shadow: var(--px) var(--px) 0 var(--text-shadow);
  background: none;
  border-style: solid;
  border-width: calc(var(--px) * 3);
  border-image: url('assets/gui/jar/button.png') 3 fill / calc(var(--px) * 3) stretch;
  image-rendering: pixelated;
  padding: calc(var(--px) * 2) calc(var(--px) * 6);
  min-height: calc(var(--px) * 20);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--px) * 3);
  user-select: none;
  outline: none;
}
/* link com cara de botao (Outros jogos, Jogos) */
a.mc-btn { text-decoration: none; text-align: center; }
.mc-btn:hover, .mc-btn:focus-visible {
  border-image-source: url('assets/gui/jar/button_hover.png');
  color: var(--yellow);
}
.mc-btn:disabled {
  border-image: url('assets/gui/jar/button_disabled.png') 1 fill / var(--px) stretch;
  color: #a0a0a0;
  text-shadow: none;
  cursor: default;
}
.mc-btn img { width: calc(var(--px) * 10); height: calc(var(--px) * 10); }

/* botao quadrado do ccvaults */
.mc-btn-sq {
  width: calc(var(--px) * 20);
  height: calc(var(--px) * 20);
  background: url('assets/gui/Button_Square.png') center / 100% 100% no-repeat;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  image-rendering: pixelated;
}
.mc-btn-sq:hover { background-image: url('assets/gui/Button_Square_Highlighted.png'); }
.mc-btn-sq img { width: 60%; height: 60%; }

/* painel cinza de inventario (borda chanfrada) */
.mc-panel {
  background: var(--gui);
  color: var(--text-gui);
  border: var(--px) solid #000;
  border-radius: calc(var(--px) * 1.5);
  box-shadow:
    inset var(--px) var(--px) 0 var(--gui-light),
    inset calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--gui-light),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 var(--gui-dark),
    inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--gui-dark);
  padding: calc(var(--px) * 6);
}

/* slot de inventario (afundado) */
.mc-slot {
  background: #8b8b8b;
  box-shadow:
    inset var(--px) var(--px) 0 #373737,
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* tooltip roxo do Minecraft */
/* fundo quase preto arroxeado + moldura em degrade roxo 1px pra dentro, como no jogo */
.mc-tooltip {
  position: relative;
  background: rgba(16, 0, 16, .94);
  padding: calc(var(--px) * 4) calc(var(--px) * 5);
  color: #fff;
  text-shadow: var(--px) var(--px) 0 #3f3f3f;
}
.mc-tooltip::before {
  content: ''; position: absolute; inset: var(--px); pointer-events: none;
  border: var(--px) solid transparent;
  border-image: linear-gradient(rgba(80, 0, 255, .8), rgba(40, 0, 127, .8)) 1;
}

/* campo de texto (widget/text_field.png) */
.mc-input {
  font: inherit;
  font-size: calc(var(--px) * 8);
  color: #e0e0e0;
  background: #000;
  border: var(--px) solid #a0a0a0;
  padding: calc(var(--px) * 3) calc(var(--px) * 4);
  outline: none;
  width: 100%;
  caret-color: #e0e0e0;
}
.mc-input:focus { border-color: #fff; }
.mc-input::placeholder { color: #707070; }

/* barra de rolagem estilo menu */
.mc-scroll::-webkit-scrollbar { width: calc(var(--px) * 6); }
.mc-scroll::-webkit-scrollbar-track { background: #000; }
.mc-scroll::-webkit-scrollbar-thumb {
  background: #c0c0c0;
  border-right: calc(var(--px) * 1) solid #808080;
  border-bottom: calc(var(--px) * 1) solid #808080;
}

.mc-heart { width: calc(var(--px) * 9); height: calc(var(--px) * 9); }

@keyframes mc-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(var(--px) * -3)); }
  40% { transform: translateX(calc(var(--px) * 3)); }
  60% { transform: translateX(calc(var(--px) * -2)); }
  80% { transform: translateX(calc(var(--px) * 2)); }
}
@keyframes mc-pop {
  0% { transform: scale(.4); opacity: 0; }
  70% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes mc-blink {
  0%, 100% { filter: none; }
  50% { filter: brightness(2.2); }
}

/* seletor de idioma (estilo botao do jogo) */
.mc-lang {
  font: inherit; font-size: 16px; color: #fff; text-shadow: 2px 2px 0 #3f3f3f;
  background: #6f6f6f; border: 2px solid #000; box-shadow: inset 2px 2px 0 #aaa, inset -2px -2px 0 #444;
  padding: 6px 10px; cursor: pointer; outline: none;
}
.mc-lang:hover { color: #ffff55; }
.mc-lang option { background: #1d1712; color: #fff; }