/* UI do role: cursor de "clicável" e ícones em pixel art (assets de Pedro, Kenney Tiny Battle CC0) */

/* Press Start 2P (SIL Open Font License 1.1), self-hosted latin + latin-ext.
   Portuguese accents (ç ã é õ ê and friends) live in the latin file (U+00C0–00FF). */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/press-start-2p/press-start-2p-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/press-start-2p/press-start-2p-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Silkscreen is stored in assets/fonts/silkscreen/ as a future alternative (OFL).
   It is not applied anywhere. To try it later, uncomment the block below and
   swap the font-family stacks from "Press Start 2P" to Silkscreen.
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/silkscreen/silkscreen-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/silkscreen/silkscreen-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/silkscreen/silkscreen-bold-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/silkscreen/silkscreen-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/

/* Fonte principal do site, grade de 8 px, anti-aliasing desligado o máximo que o
   navegador permite. O prefixo :root ganha do preflight do Tailwind CDN. */
:root,
:root body {
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
}
:root input,
:root button,
:root select,
:root textarea,
:root option {
  font-family: inherit;
}

/* Press Start 2P é larga; texto denso da HUD fica em 8 px (múltiplo da grade)
   e o painel ganha um pouco de largura para não estourar. */
#character-panel {
  width: 16rem; /* estreito: ícones no lugar de rótulos; o nome usa truncate */
}
#character-panel .w-16 {
  width: 5rem;
  flex-shrink: 0;
}
#combat-stats,
#terrain-label,
#grid-tooltip {
  font-size: 8px;
  line-height: 1.8;
}
#chat-log-messages {
  font-size: 8px;
  line-height: 16px;
}

/* Cursor de mão para tudo que é clicável. É cursor CSS puro: o Chrome troca o ponteiro do
   sistema pela imagem (não existe elemento seguindo o mouse, então nada bloqueia cliques).
   As PNGs foram recortadas sem a margem transparente: a de 24x24 tem a ponta do dedo na
   linha 0, colunas 6 a 13, então o hotspot é 9 0 (na de 12x12 seria 4 0).
   O "pointer" no fim é o fallback se a imagem não carregar.
   O prefixo :root garante prioridade sobre o preflight do Tailwind CDN. */
:root a[href],
:root button,
:root [role="button"],
:root label[for],
:root select,
:root summary,
:root [data-create-slot],
:root [data-slot-item],
:root #character-slots a {
  cursor: url("../assets/ui/cursor-pointer@2x.png") 9 0, pointer;
}
:root button:disabled,
:root [aria-disabled="true"] {
  cursor: not-allowed;
}

/* Ícones pixel art nítidos (sem suavização) */
.pixelated {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}


/* Barra de rolagem do histórico de chat: fina, quadrada, paleta da HUD.
   Fundo do painel usa alpha no background (não opacity no elemento), para o texto
   amarelo de sistema continuar legível. */
#chat-log-messages {
  scrollbar-width: thin;
  scrollbar-color: #fbbf24 #1c1917; /* amber-400 no trilho brown-950 */
}
#chat-log-messages::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#chat-log-messages::-webkit-scrollbar-track {
  background: #1c1917;
  border-radius: 0;
}
#chat-log-messages::-webkit-scrollbar-thumb {
  background: #fbbf24;
  border: 1px solid #57534e; /* stone-600 */
  border-radius: 0;
}
#chat-log-messages::-webkit-scrollbar-thumb:hover {
  background: #f59e0b; /* amber-500 */
}
#chat-log-messages::-webkit-scrollbar-corner {
  background: #1c1917;
}


/* Peças reutilizáveis da UI do jogo: cantos retos, borda 2px, fundo quase opaco, padding na grade de 8px. */
.ui-panel {
  background: rgba(31, 22, 16, 0.95); /* brown-950/95 */
  border: 2px solid #634530; /* brown-700 */
  border-radius: 0;
  color: #f5ebe0; /* brown-100 */
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ui-panel--flush {
  padding: 0;
}
.ui-panel--menu {
  padding: 32px;
}
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid #634530;
  border-radius: 0;
  background: transparent;
  color: #e6d3bd; /* brown-200 */
  padding: 8px 16px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.ui-button:hover,
.ui-button:focus-visible {
  border-color: #fdba74; /* orange-300 */
  color: #fbbf24; /* amber-400 */
  outline: none;
}
.ui-button--primary {
  background: #b8916a; /* brown-400 */
  border-color: #b8916a;
  color: #1f1610; /* brown-950 */
  font-weight: 600;
}
.ui-button--primary:hover,
.ui-button--primary:focus-visible {
  background: #d2b48c; /* brown-300 */
  border-color: #d2b48c;
  color: #1f1610;
}
.ui-button--primary:disabled,
.ui-button--primary[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.ui-button--primary:disabled:hover,
.ui-button--primary[disabled]:hover {
  background: #b8916a;
  border-color: #b8916a;
  color: #1f1610;
}
.ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #634530;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 8px;
  font-family: inherit;
  line-height: 1;
}
.ui-icon-button:hover,
.ui-icon-button:focus-visible {
  border-color: #fdba74;
  color: #fbbf24;
  outline: none;
}
.ui-icon-button--primary {
  background: #b8916a;
  border-color: #b8916a;
  color: #1f1610;
  font-weight: 700;
}
.ui-icon-button--primary:hover,
.ui-icon-button--primary:focus-visible {
  background: #d2b48c;
  border-color: #d2b48c;
  color: #1f1610;
}
.ui-input {
  width: 100%;
  border: 2px solid #634530;
  border-radius: 0;
  background: #1f1610;
  color: #f5ebe0;
  padding: 8px 16px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.ui-input::placeholder {
  color: #9c7350; /* brown-500 */
}
.ui-input:focus {
  outline: none;
  border-color: #fbbf24; /* amber-400 */
}
.ui-toast {
  background: rgba(31, 22, 16, 0.95);
  border: 2px solid #634530;
  border-radius: 0;
  color: #f5ebe0;
  padding: 8px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.ui-toast--error {
  border-color: #facc15; /* yellow-400 */
  color: #fef08a; /* yellow-200 */
}
.ui-error {
  border: 2px solid #facc15;
  border-radius: 0;
  background: rgba(31, 22, 16, 0.95);
  color: #fef08a;
  padding: 8px 16px;
}