/* Paleta de sertão: barro, caatinga seca, céu de meio-dia e azul de madrugada.
   O HUD é DOM por cima do canvas, para o texto ficar legível em qualquer tela. */

:root {
  --tinta: #efe7d4;
  --apagado: #a1937a;
  --barro: #6b4a28;
  --realce: #e8a33c;
  --alerta: #c9452f;
  --verde: #7fae5a;
  --agua: #4a96b0;
  --borda: 1px solid #3a2f22;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #100d09;
  color: var(--tinta);
  font: 500 14px/1.45 ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}

#palco { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
#tela { display: block; width: 100%; height: 100%; background: #12100c; }

/* ------------------------------------------------------------------- HUD */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
  padding: clamp(8px, 1.4vw, 18px);
  text-shadow: 0 1px 3px #000;
}

#palco.andando #hud { display: block; }

.bloco {
  position: absolute;
  background: rgba(16, 12, 8, 0.72);
  border: var(--borda);
  padding: 8px 12px;
}

.medidores { left: clamp(8px, 1.4vw, 18px); top: clamp(8px, 1.4vw, 18px); min-width: 210px; }
.recado {
  left: 50%;
  top: clamp(8px, 1.4vw, 18px);
  transform: translateX(-50%);
  text-align: center;
  min-width: 240px;
  max-width: min(74vw, 460px);
}
.bolsa { left: clamp(8px, 1.4vw, 18px); bottom: clamp(8px, 1.4vw, 18px); min-width: 190px; }

.medida { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.medida span { color: var(--apagado); width: 4.6em; font-size: 0.84em; }
.barra { flex: 1; height: 9px; background: #241b12; border: var(--borda); overflow: hidden; }
.barra i { display: block; height: 100%; }
#hud-vida { background: linear-gradient(90deg, #8e2a1e, var(--alerta)); }
#hud-sede { background: linear-gradient(90deg, #2a6a7e, var(--agua)); }
#hud-sede.critico { background: var(--realce); }
#hud-vida.critico { background: var(--alerta); animation: pulsar 0.7s ease-in-out infinite; }

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.relogio { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.relogio b { font-size: 1.2em; color: var(--realce); }
.relogio b.noite { color: #8fb4d8; }
.relogio span { color: var(--apagado); font-size: 0.82em; }

.recado b { display: block; color: var(--realce); letter-spacing: 0.08em; }
.recado span { display: block; color: var(--apagado); font-size: 0.86em; }

.linha-bolsa { display: flex; justify-content: space-between; gap: 12px; }
.linha-bolsa span { color: var(--apagado); font-size: 0.84em; }
.bolsa ul { margin: 6px 0 0; padding: 0; list-style: none; font-size: 0.88em; }
.bolsa li { display: flex; justify-content: space-between; color: var(--apagado); }
.bolsa li b { color: var(--tinta); }
.bolsa li.vazio { color: #6a5f4e; }
.dica-loja { margin-top: 6px; color: var(--realce); font-size: 0.82em; }

/* Seta de perigo: uma por bicho irritado fora da tela. O div de fora gira,
   o de dentro fica de pe na borda — assim a seta aponta e o texto nao. */
#perigo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
}

.seta-perigo {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
}

.seta-perigo i {
  position: absolute;
  left: -13px;
  top: -36vh;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 21px solid var(--alerta);
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.8));
  opacity: 0.92;
}

.seta-perigo.onca i { border-bottom-color: #e8862c; }

#mapa {
  position: absolute;
  right: clamp(8px, 1.4vw, 18px);
  top: clamp(8px, 1.4vw, 18px);
  width: clamp(120px, 14vw, 210px);
  height: auto;
  border: var(--borda);
  background: rgba(16, 12, 8, 0.8);
  image-rendering: pixelated;
}

#mapa.grande { width: min(70vh, 70vw); }

#aviso, #recado {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  background: rgba(16, 12, 8, 0.86);
  border: var(--borda);
  max-width: min(90vw, 680px);
  text-align: center;
}

#aviso { top: 22%; color: var(--realce); letter-spacing: 0.12em; }
#recado { bottom: 12%; color: var(--tinta); font-size: 0.92em; line-height: 1.5; }
.oculto { display: none !important; }

/* -------------------------------------------------------------- cortinas */

.cortina {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(14px, 3vw, 40px);
  background:
    radial-gradient(circle at 50% 22%, rgba(120, 78, 32, 0.28), transparent 60%),
    linear-gradient(180deg, rgba(10, 8, 6, 0.96), rgba(14, 10, 6, 0.98));
  overflow-y: auto;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: clamp(34px, 8vw, 84px);
  letter-spacing: 0.26em;
  color: var(--realce);
  text-shadow: 0 0 34px rgba(232, 163, 60, 0.3);
}

h2 { margin: 0; font-size: clamp(20px, 3.4vw, 32px); letter-spacing: 0.16em; color: var(--realce); }
.linha { margin: 0; max-width: 66ch; color: var(--apagado); }
.linha b { color: var(--tinta); }
.regra { max-width: 76ch; font-size: 0.9em; }
.rodape { margin: 0; color: #6a5f4e; font-size: 0.85em; }

.colunas { display: flex; flex-wrap: wrap; gap: clamp(14px, 4vw, 52px); justify-content: center; text-align: left; }
table { border-collapse: collapse; }
.controles th, .controles td { padding: 2px 10px; text-align: left; font-weight: 500; }
.controles th { color: var(--apagado); }

.titulo-lista { margin: 0 0 4px; color: var(--realce); letter-spacing: 0.12em; font-size: 0.85em; }
.lista { margin: 0; padding-left: 1.4em; color: var(--apagado); font-size: 0.9em; }
.lista b { color: var(--tinta); }

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 1px 5px;
  margin-right: 3px;
  border: var(--borda);
  border-bottom-width: 2px;
  border-radius: 3px;
  background: #1c150e;
  font: inherit;
  font-size: 0.88em;
}

.sementes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
  width: min(92vw, 760px);
  margin: 4px 0;
}

.semente {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
  text-align: left;
  background: #1a130c;
  border: var(--borda);
  color: var(--tinta);
  font: inherit;
  cursor: pointer;
}

.semente b { color: var(--realce); letter-spacing: 0.1em; }
.semente span { color: var(--apagado); font-size: 0.8em; }
.semente:hover { background: #241a10; border-color: var(--realce); }

.diario {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(92vw, 720px);
  text-align: left;
  max-height: 58vh;
  overflow-y: auto;
}

.diario li { padding: 6px 10px; border-bottom: var(--borda); }
.diario li b { color: var(--tinta); }
.diario li span { display: block; color: var(--apagado); font-size: 0.8em; }
.diario li i { display: block; color: #8d8068; font-size: 0.85em; font-style: normal; margin-top: 2px; }
.diario li.feita b { color: var(--verde); }
.diario li.fechada { opacity: 0.45; }

.loja {
  list-style: none;
  margin: 0;
  padding: 0;
  width: min(92vw, 560px);
  text-align: left;
}

.loja li { margin-bottom: 6px; }

.compra {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 12px;
  width: 100%;
  padding: 8px 12px;
  background: #1a130c;
  border: var(--borda);
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.compra b { color: var(--realce); letter-spacing: 0.1em; }
.compra span { grid-column: 1; color: var(--apagado); font-size: 0.82em; }
.compra i {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-style: normal;
  color: var(--tinta);
}
.compra i::after { content: ' mil réis'; color: var(--apagado); font-size: 0.8em; }
.compra:hover:enabled { background: #241a10; border-color: var(--realce); }
.compra:disabled { opacity: 0.4; cursor: default; }

.botao {
  padding: 11px 28px;
  background: var(--realce);
  border: none;
  color: #17110a;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
}

.botao:hover { background: #ffbd5a; }
.botao.secundario { background: transparent; border: var(--borda); color: var(--apagado); }
.botao.secundario:hover { color: var(--tinta); border-color: var(--realce); }

/* ----------------------------------------------------------------- toque */

#toque { display: none; }

@media (pointer: coarse) {
  #palco.andando #toque { display: block; }


  /* Em tela de celular o recado da missao caia em cima dos medidores e do
     mapa: desce para baixo da caixa de vida e estreita. */
  .recado { top: 98px; max-width: 52vw; min-width: 0; font-size: 0.86em; }
  .medidores { min-width: 174px; font-size: 0.82em; }
  #aviso { top: 30%; font-size: 0.9em; }
  /* Metade direita da tela e a mira do polegar, atras dos botoes. */
  #olhar {
    position: absolute;
    right: 0;
    top: 0;
    width: 52vw;
    height: 100%;
    touch-action: none;
  }

  #manche {
    position: absolute;
    left: 4vw;
    bottom: 5vh;
    width: 34vw;
    max-width: 190px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(24, 18, 12, 0.5);
    border: var(--borda);
    touch-action: none;
  }

  .acao {
    position: absolute;
    right: 4vw;
    width: 21vw;
    max-width: 104px;
    padding: 12px 0;
    background: rgba(24, 18, 12, 0.66);
    border: var(--borda);
    color: var(--tinta);
    font: inherit;
    font-size: 12px;
    touch-action: none;
    user-select: none;
  }

  [data-acao="atacar"] { bottom: 34vh; }
  [data-acao="interagir"] { bottom: 26vh; }
  [data-acao="beber"] { bottom: 18vh; }
  [data-acao="diario"] { bottom: 10vh; }
  [data-acao="loja"] { bottom: 2vh; }

  .bolsa { display: none; }
  #mapa { width: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .barra i { transition: none; }
}