/* ---------- Tela principal do jogo ---------- */
.tela-jogo {
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--breu);
}

/* Fundo: imagem do ambiente ou caatinga desenhada */
.jogo-fundo { position: absolute; inset: 0; }
.jogo-fundo svg,
.jogo-fundo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.c-ceu-alto { stop-color: var(--gravura-luz); }
.c-ceu-baixo { stop-color: var(--gravura-papel-2); }
.c-sol { fill: #F0D3A0; }
.c-serra-longe { fill: #BC925D; }
.c-serra-meio { fill: var(--gravura-meio); }
.c-traco { stroke: #5E4528; stroke-width: 1; }
.c-chao { fill: #C49A64; }
.c-pedras path { fill: #8C6840; stroke: var(--gravura-tinta); stroke-width: 1.5; }
.c-veg-longe { stroke: #7E5E38; }
.c-veg-perto { stroke: var(--gravura-tinta); }
.c-casas path { fill: #8C6840; stroke: var(--gravura-tinta); stroke-width: 1.5; }
.c-casas .c-porta { fill: var(--gravura-tinta); }
.c-casas .c-cruz { fill: none; stroke: var(--gravura-tinta); stroke-width: 3; }

/* Vinheta da gravura: bordas escurecidas */
.jogo-fundo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(57, 40, 21, .55) 100%);
  pointer-events: none;
}

/* Luz da hora do dia sobre o cenário */
.jogo-luz {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0;
  background: transparent;
  transition: opacity calc(var(--dur) * 12) linear, background calc(var(--dur) * 12) linear;
}
.tela-jogo[data-periodo="madrugada"] .jogo-luz { background: linear-gradient(#1C2030, #3A3A4C); opacity: .88; }
.tela-jogo[data-periodo="amanhecer"] .jogo-luz { background: linear-gradient(#B9A3A6, #E7C59A); opacity: .55; }
.tela-jogo[data-periodo="manha"] .jogo-luz { background: #F0E4C8; opacity: .1; }
.tela-jogo[data-periodo="tarde"] .jogo-luz { background: linear-gradient(#F0E4C8, #E6BE86); opacity: .38; }
.tela-jogo[data-periodo="entardecer"] .jogo-luz { background: linear-gradient(#A4583E, #D9893A); opacity: .58; }
.tela-jogo[data-periodo="noite"] .jogo-luz { background: linear-gradient(#1C2030, #34344A); opacity: .84; }

/* Topo: botão de menu */
.jogo-topo {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 4;
}
.jogo-menu { background: rgba(26, 17, 9, .8); border-color: var(--gravura-sombra); color: var(--gravura-luz); }

/* Base: relógio no centro */
.jogo-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.relogio {
  position: relative;
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: min(100%, 30rem);
  padding: 12px 20px;
  background-color: #2C2116;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(201, 160, 106, .16), transparent 70%),
    var(--tex-papel, none);
  background-size: auto, 300px 300px;
  background-blend-mode: normal, multiply;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(225, 187, 134, .12), inset 0 -2px 6px rgba(0, 0, 0, .4);
  color: var(--papel-velho);
}
.relogio-lado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  font-family: var(--f-menu);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.15;
}
.relogio-lado.direita { align-items: flex-end; text-align: right; }
.relogio-icone { display: block; width: 24px; height: 24px; color: var(--ouro-vivo); }
.relogio-icone svg { width: 100%; height: 100%; }
.relogio-data { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.relogio-semana { color: var(--poeira); }

/* Visor âmbar, com os segmentos apagados "88:88" ao fundo */
.relogio-visor {
  position: relative;
  padding: 6px 14px 4px;
  background: #120F0A;
  border: 1px solid #000;
  border-radius: 6px;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .85), 0 1px 0 rgba(234, 221, 191, .08);
  font-family: var(--f-menu);
  font-weight: 700;
  font-size: clamp(2.3rem, 9vw, 3.3rem);
  line-height: 1;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}
.relogio-fantasma {
  position: absolute;
  inset: 6px 14px 4px;
  color: rgba(233, 182, 90, .09);
}
.relogio-digitos {
  position: relative;
  color: #E9B65A;
  text-shadow: 0 0 12px rgba(233, 182, 90, .45);
}
.relogio.correndo .relogio-digitos { color: #FFD27A; text-shadow: 0 0 18px rgba(255, 210, 122, .7); }
:root[data-contraste="alto"] .relogio-digitos { color: #FFD27A; text-shadow: none; }

@media (max-width: 420px) {
  .relogio { gap: 10px; padding: 10px 12px; }
  .relogio-lado { font-size: .72rem; letter-spacing: .08em; }
  .relogio-visor { padding-inline: 10px; }
  .relogio-fantasma { inset-inline: 10px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .relogio-visor { font-size: 2.2rem; }
}

/* ---------- Folha central: papel envelhecido, sem caixas nem linhas ---------- */
.tela-jogo {
  --tom-ganho: color-mix(in srgb, var(--c-ganho) 58%, #1A1109);
  --tom-perigo: color-mix(in srgb, var(--c-perigo) 80%, #1A1109);
  --tom-alerta: #85540F;
  --tom-neutro: var(--gravura-tinta);
}
.jogo-painel {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(18px + env(safe-area-inset-top, 0px));
  bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(74rem, calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px)) - 100px));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.jp-folha-principal {
  position: relative;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

/* O papel: textura, manchas, bordas queimadas e irregulares */
.jp-papel {
  position: absolute;
  inset: 0;
  background-color: var(--gravura-luz);
  background-image:
    radial-gradient(ellipse at 18% 22%, rgba(255, 238, 205, .55), transparent 45%),
    radial-gradient(ellipse at 82% 78%, rgba(119, 87, 49, .22), transparent 50%),
    radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(92, 62, 30, .55) 100%),
    var(--tex-papel, none),
    var(--tex-grao, none);
  background-size: auto, auto, auto, 420px 420px, 160px 160px;
  box-shadow: inset 0 0 40px rgba(92, 62, 30, .55), inset 0 0 6px rgba(57, 40, 21, .6);
  filter: url(#jp-rasgado) drop-shadow(0 22px 34px rgba(12, 7, 2, .6));
  pointer-events: none;
}
:root[data-papel="nao"] .jp-papel,
:root[data-contraste="alto"] .jp-papel { background-image: none; filter: drop-shadow(0 18px 30px rgba(12, 7, 2, .55)); }

.jp-conteudo {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 3.4vw, 46px) clamp(26px, 3.6vw, 52px);
  color: var(--gravura-tinta);
  scrollbar-width: thin;
  scrollbar-color: rgba(57, 40, 21, .4) transparent;
}
.jp-col { min-width: 0; display: flex; flex-direction: column; }

.jp-floreio { display: block; width: 9rem; height: 14px; margin: 18px auto; color: var(--gravura-sombra); }

/* ---------- Esquerda: local ---------- */
.jp-local-tipo {
  margin: 0;
  font-family: var(--f-menu);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gravura-sombra);
}
.jp-local-nome {
  margin: 4px 0 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.8vw, 2.7rem);
  line-height: 1;
}
.jp-gravura {
  position: relative;
  margin: 16px 0 0;
  aspect-ratio: 5 / 4;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 52% 54% at 50% 50%, #000 62%, transparent 100%);
}
.jp-gravura svg,
.jp-gravura img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.jp-local-desc {
  margin: 10px 0 0;
  font-family: var(--f-narrativa);
  font-size: .95rem;
  line-height: 1.55;
  color: #4A3520;
}

/* ---------- Centro: menu em texto ---------- */
.jp-menu-titulo {
  margin: 0 0 6px;
  font-family: var(--f-menu);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gravura-sombra);
}
.jp-menu-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.jp-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  min-height: var(--toque);
  padding: 6px 4px 6px 34px;
  background: none;
  border: none;
  color: var(--gravura-tinta);
  text-align: left;
  touch-action: manipulation;
}
.jp-item .estrela {
  position: absolute;
  left: 2px;
  top: 50%;
  width: 22px;
  height: 22px;
  color: #C9A04A;
  opacity: 0;
  transform: translateY(-50%) scale(.5) rotate(-40deg);
  transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva);
}
.jp-item-nome {
  font-family: var(--f-titulo);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.1;
  transition: color var(--dur) var(--curva);
}
.jp-item-custo {
  margin-left: auto;
  flex-shrink: 0;
  font-family: var(--f-narrativa);
  font-size: .88rem;
  color: var(--gravura-sombra);
  white-space: nowrap;
}
.jp-item:focus-visible { outline: none; }
.jp-item:focus-visible .jp-item-nome { color: var(--gravura-vermelho); }
.jp-item:focus-visible .estrela { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
@media (hover: hover) {
  .jp-item:hover .jp-item-nome { color: var(--gravura-vermelho); }
  .jp-item:hover .estrela { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
}
.jp-item:active .jp-item-nome { color: #5E1611; }
.jp-menu-lista.menor .jp-item { min-height: 42px; }
.jp-menu-lista.menor .jp-item-nome { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
.ocupado .jp-item { pointer-events: none; opacity: .55; }

.jp-dica {
  margin: 14px 0 0 34px;
  min-height: 2.9em;
  font-family: var(--f-narrativa);
  font-size: .92rem;
  line-height: 1.45;
  font-style: italic;
  color: #5A4126;
}

/* Diário: a última anotação, escrita à máquina */
.jp-diario { margin: 18px 0 0 34px; }
.jp-anotacao { display: flex; flex-direction: column; gap: 6px; }
.jp-anotacao.nova { animation: anotar 700ms var(--curva) both; }
@keyframes anotar { from { opacity: 0; filter: blur(2px); } }
:root[data-movimento="reduzido"] .jp-anotacao.nova { animation: none; }
.jp-anotacao-hora {
  margin: 0;
  font-family: var(--f-menu);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--gravura-vermelho);
}
.jp-anotacao-texto { margin: 0; font-family: var(--f-narrativa); font-size: .95rem; line-height: 1.5; }
.jp-anotacao-texto.alerta { color: var(--tom-perigo); }
.jp-anotacao-mudancas {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-family: var(--f-menu);
  font-weight: 600;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
}
.jp-anotacao-mudancas .bom { color: var(--tom-ganho); }
.jp-anotacao-mudancas .ruim { color: var(--tom-perigo); }
.jp-diario-vazio { margin: 0; font-family: var(--f-narrativa); font-size: .92rem; color: var(--gravura-sombra); }

/* ---------- Direita: o bando ---------- */
.jp-info-titulo {
  margin: 0 0 12px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
}
.jp-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.jp-stat dt {
  font-family: var(--f-menu);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gravura-sombra);
}
.jp-stat dd { margin: 2px 0 0; display: flex; flex-direction: column; gap: 1px; }
.jp-num {
  font-family: var(--f-titulo);
  font-size: 1.75rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jp-palavra { font-family: var(--f-narrativa); font-size: .85rem; line-height: 1.35; color: #4A3520; }
.jp-nota { font-size: .74rem; line-height: 1.3; font-style: italic; color: var(--gravura-sombra); }
.jp-stat.tom-perigo .jp-num, .jp-stat.tom-perigo .jp-palavra { color: var(--tom-perigo); }
.jp-stat.tom-alerta .jp-num { color: var(--tom-alerta); }
.jp-stat:nth-child(3) { grid-column: 1 / -1; }

.jp-tracos { display: block; width: 104px; height: 16px; margin-top: 3px; overflow: visible; }
.jp-tracos path { stroke-width: 2.2; stroke-linecap: round; fill: none; }
.jp-tracos .vazio { stroke: rgba(57, 40, 21, .22); }
.jp-tracos .cheio { stroke: var(--cor-traco, var(--tom-neutro)); }
.jp-tracos .faixa { stroke: var(--cor-traco, var(--tom-neutro)); opacity: .45; stroke-dasharray: 2 2; }
.jp-tracos.tom-ganho { --cor-traco: var(--tom-ganho); }
.jp-tracos.tom-perigo { --cor-traco: var(--tom-perigo); }
.jp-tracos.tom-alerta { --cor-traco: var(--tom-alerta); }

.jp-recursos {
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 5px 16px;
  font-size: .95rem;
}
.jp-recurso { display: contents; }
.jp-recurso dt { font-family: var(--f-menu); font-weight: 600; letter-spacing: .03em; color: #4A3520; }
.jp-recurso dd { margin: 0; justify-self: end; font-family: var(--f-narrativa); font-variant-numeric: tabular-nums; text-align: right; }
.jp-recurso.tom-perigo dd { color: var(--tom-perigo); }
.jp-recurso.tom-alerta dd { color: var(--tom-alerta); }

/* ---------- Folhas por cima: inventário e status ---------- */
.jp-folha {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 10px;
  background: rgba(26, 17, 9, .5);
}
.jp-folha-papel {
  position: relative;
  width: min(32rem, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
}
.jp-folha-conteudo {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 34px 34px;
  color: var(--gravura-tinta);
}
.jp-folha-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jp-folha-cabeca h2 { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: 2rem; line-height: 1; }
.jp-fechar {
  min-height: 40px;
  padding: 4px 6px;
  background: none;
  border: none;
  font-family: var(--f-menu);
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gravura-vermelho);
}
.jp-fechar:focus-visible { outline: 2px solid var(--gravura-tinta); outline-offset: 2px; }
.jp-recursos.largo { grid-template-columns: minmax(0, 1fr) auto; }
.jp-inv-grupo h3 {
  margin: 0 0 6px;
  font-family: var(--f-menu);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gravura-sombra);
}
.jp-status-resumo { margin: 0; font-family: var(--f-narrativa); font-size: .95rem; line-height: 1.5; }
.jp-membros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.jp-membros > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: start; }
.jp-membro-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jp-membro-nome strong { font-family: var(--f-titulo); font-weight: 400; font-size: 1.35rem; line-height: 1.05; }
.jp-membros > li.jogador .jp-membro-nome strong { color: var(--gravura-vermelho); }
.jp-membro-nome span { font-family: var(--f-narrativa); font-size: .85rem; color: #4A3520; }
.jp-membro-dados { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-family: var(--f-menu); font-weight: 600; font-size: .85rem; font-variant-numeric: tabular-nums; }
.jp-membro-conf { color: var(--gravura-sombra); font-weight: 500; }

/* ---------- Telas médias: o bando desce para baixo ---------- */
@media (max-width: 960px) {
  .jogo-painel { width: calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px)) - 80px); }
  .jp-conteudo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .jp-info { grid-column: 1 / -1; }
  .jp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jp-stat:nth-child(3) { grid-column: auto; }
  .jp-recursos { grid-template-columns: repeat(2, max-content minmax(0, 1fr)); column-gap: 24px; }
}

/* ---------- Celular: uma coluna que rola entre o topo e o relógio ---------- */
@media (max-width: 720px) {
  .jogo-painel {
    top: calc(70px + env(safe-area-inset-top, 0px));
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 20px);
    justify-content: flex-start;
  }
  .jp-folha-principal { height: 100%; }
  .jp-conteudo { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 22px 30px; }
  .jp-info { grid-column: auto; }
  .jp-local {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42%;
    grid-template-areas: "tipo grav" "nome grav" "desc desc";
    column-gap: 12px;
    align-items: start;
  }
  .jp-local-tipo { grid-area: tipo; font-size: .74rem; }
  .jp-local-nome { grid-area: nome; font-size: 1.75rem; }
  .jp-gravura { grid-area: grav; margin: 0; }
  .jp-local-desc { grid-area: desc; font-size: .9rem; }
  .jp-item { padding-left: 30px; }
  .jp-item-nome { font-size: 1.45rem; }
  .jp-dica { display: none; }
  .jp-diario { margin-left: 30px; }
  .jp-floreio { margin: 12px auto; }
  .jp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jp-stat:nth-child(3) { grid-column: 1 / -1; }
  .jp-recursos { grid-template-columns: max-content minmax(0, 1fr); }
  .jp-folha-conteudo { padding: 26px 22px 28px; }
}

/* ---------- Paisagem baixa (celular deitado) ---------- */
@media (orientation: landscape) and (max-height: 520px) {
  .jogo-painel { top: calc(10px + env(safe-area-inset-top, 0px)); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); width: calc(100% - 140px); }
  .jp-gravura { display: none; }
  .jp-dica { display: none; }
  .relogio { padding: 6px 14px; }
}

/* ---------- Retângulos: opções e informações dentro de placas de papel tingido ---------- */
.tela-jogo {
  --placa-fundo:
    linear-gradient(180deg, rgba(255, 236, 200, .18), rgba(92, 62, 30, .10)),
    var(--tex-papel, none),
    var(--gravura-papel);
  --placa-sombra: inset 0 0 0 1px rgba(57, 40, 21, .38), inset 0 0 14px rgba(92, 62, 30, .35), 0 2px 4px rgba(26, 17, 9, .18);
}
.jp-item,
.jp-stat,
.jp-recursos,
.jp-anotacao,
.jp-diario-vazio,
.jp-dica,
.jp-local-desc,
.jp-status-resumo,
.jp-membros > li {
  background: var(--placa-fundo);
  background-size: auto, 300px 300px, auto;
  box-shadow: var(--placa-sombra);
  border-radius: 3px;
}
.jp-menu-lista { gap: 8px; }
.jp-item { padding: 10px 14px 10px 40px; align-items: center; transition: background var(--dur) var(--curva), box-shadow var(--dur) var(--curva); }
.jp-item .estrela { left: 10px; }
.jp-item:focus-visible,
.jp-item:active { background: linear-gradient(180deg, rgba(142, 27, 18, .10), rgba(92, 62, 30, .16)), var(--tex-papel, none), var(--gravura-papel); background-size: auto, 300px 300px, auto; box-shadow: inset 0 0 0 1.5px rgba(142, 27, 18, .55), inset 0 0 16px rgba(92, 62, 30, .4); }
@media (hover: hover) {
  .jp-item:hover { background: linear-gradient(180deg, rgba(142, 27, 18, .10), rgba(92, 62, 30, .16)), var(--tex-papel, none), var(--gravura-papel); background-size: auto, 300px 300px, auto; box-shadow: inset 0 0 0 1.5px rgba(142, 27, 18, .55), inset 0 0 16px rgba(92, 62, 30, .4); }
}
.jp-stat { padding: 10px 12px 12px; }
.jp-stats { gap: 10px; }
.jp-recursos { padding: 12px 14px; }
.jp-anotacao, .jp-diario-vazio { padding: 12px 14px; }
.jp-dica { margin: 12px 0 0; padding: 10px 14px; min-height: 0; }
.jp-diario { margin: 10px 0 0; }
.jp-local-desc { padding: 12px 14px; }
.jp-status-resumo { padding: 10px 14px; }
.jp-membros > li { padding: 10px 14px; }
.jp-inv-grupo .jp-recursos, .jp-folha-conteudo > .jp-recursos { padding: 10px 14px; }
@media (max-width: 720px) {
  .jp-item { padding-left: 36px; }
  .jp-diario { margin-left: 0; }
}
.jp-item { padding-block: 6px; min-height: 44px; }
.jp-item-nome { font-size: clamp(1.25rem, 1.7vw, 1.55rem); }
.jp-menu-lista { gap: 6px; }
.jp-num { font-size: 1.5rem; }
.jp-conteudo { padding-block: clamp(24px, 2.6vw, 36px); }

/* ---------- Versão simples: local e gravura | opções ---------- */
.jogo-painel { width: min(52rem, calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px)) - 100px)); }
.jp-conteudo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.jp-gravura {
  -webkit-mask-image: none; mask-image: none;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .45), 0 2px 6px rgba(26, 17, 9, .25);
  padding: 8px;
  background: var(--placa-fundo);
  background-size: auto, 300px 300px, auto;
}
.jp-gravura svg, .jp-gravura img { border-radius: 2px; }
.jp-item-custo { display: none; }
.jp-folha-conteudo .jp-info-titulo { display: none; }
.jp-folha-papel { width: min(36rem, 100%); }
@media (max-width: 720px) {
  .jp-conteudo { grid-template-columns: minmax(0, 1fr); }
  .jp-local { display: flex; }
  .jp-gravura { margin-top: 12px; }
  .jogo-painel { justify-content: center; }
  .jp-folha-principal { height: auto; }
}
@media (orientation: landscape) and (max-height: 520px) { .jp-gravura { display: block; max-height: 55vh; } }
.tela-jogo > .jp-folha { z-index: 20; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(26, 17, 9, .6); }
.jp-folha-papel { max-height: 100%; }

/* ---------- Tela principal (esboço de 8 nov): moldura | local, dia, gravura | informações e opções ---------- */
.jogo-painel { width: min(64rem, calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px)) - 100px)); }
.jm-moldura {
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  display: grid;
  grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 230, 190, .08), rgba(40, 26, 12, .18)), var(--tex-papel, none), #A6845F;
  background-size: auto, 360px 360px, auto;
  box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .35), inset 0 0 30px rgba(57, 40, 21, .35), 0 24px 60px rgba(0, 0, 0, .55);
  color: var(--gravura-tinta);
}
.jm-esq { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.jm-pilula {
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--f-corpo);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--gravura-tinta);
  background: linear-gradient(180deg, rgba(255, 246, 225, .3), rgba(255, 238, 205, .1)), var(--tex-papel, none), #CDAB82;
  background-size: auto, 300px 300px, auto;
  box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .25), inset 0 0 10px rgba(92, 62, 30, .2);
}
.jm-local:focus-visible { outline: none; }
.jm-esq .jp-gravura {
  flex: 1;
  min-height: 14rem;
  aspect-ratio: auto;
  margin: 4px 0 0;
  border-radius: 4px;
  -webkit-mask-image: none; mask-image: none;
  padding: 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .4), 0 4px 12px rgba(26, 17, 9, .3);
  background: var(--gravura-papel);
}
.jm-esq .jp-gravura img { mix-blend-mode: normal; object-position: center; }
.jm-dir {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 18px 20px 26px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 236, 200, .12), rgba(92, 62, 30, .06)), var(--tex-papel, none), #CDAB82;
  background-size: auto, 300px 300px, auto;
  box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .25), inset 0 0 22px rgba(92, 62, 30, .25);
}
.jm-info {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 24px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 246, 225, .35), rgba(255, 238, 205, .15)), var(--tex-papel, none), #D9BE9E;
  background-size: auto, 300px 300px, auto;
  box-shadow: inset 0 0 0 1px rgba(57, 40, 21, .18);
}
.jm-info-item { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; font-size: 1.02rem; }
.jm-info-item dt { font-family: var(--f-corpo); color: #4A3520; }
.jm-info-item dd { margin: 0; font-family: var(--f-corpo); }
.jm-info-item.tom-perigo dd { color: var(--tom-perigo); }
.jm-info-item.tom-alerta dd { color: var(--tom-alerta); }
.jm-dir .jp-centro { flex: 1; justify-content: center; }
.jm-grade { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px !important; padding: 0 12px; }
.jm-grade li { display: flex; }
.jm-grade .jp-item {
  justify-content: center;
  text-align: center;
  min-height: 4.6rem;
  padding: 10px 16px;
  border-radius: 12px;
}
.jm-grade .jp-item .estrela { left: 10px; }
.jm-grade .jp-item-nome { font-family: var(--f-corpo); font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.jm-dir .jp-menu-titulo { text-align: center; }
.jm-dir .jp-floreio { margin: 10px auto; }
@media (max-width: 760px) {
  .jogo-painel { width: calc(100% - 20px); top: calc(66px + env(safe-area-inset-top, 0px)); }
  .jm-moldura { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; border-radius: 20px; }
  .jm-esq { display: grid; grid-template-columns: minmax(0, 1fr) 40%; grid-template-areas: "local grav" "dia grav"; gap: 8px 12px; align-items: center; padding: 0; }
  .jm-local { grid-area: local; font-size: 1rem; }
  .jm-dia { grid-area: dia; font-size: 1rem; }
  .jm-esq .jp-gravura { grid-area: grav; min-height: 0; aspect-ratio: 4 / 3; margin: 0; }
  .jm-dir { padding: 12px 12px 16px; gap: 14px; }
  .jm-info { grid-template-columns: minmax(0, 1fr); padding: 10px 14px; font-size: .92rem; }
  .jm-grade { gap: 10px !important; padding: 0; }
  .jm-grade .jp-item { min-height: 3.6rem; padding: 8px 10px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .jm-esq .jp-gravura { display: block; min-height: 0; }
  .jm-grade .jp-item { min-height: 2.8rem; }
}

/* Ícones das ações do menu */
.jp-item-icone { display: inline-flex; flex-shrink: 0; width: 1.5em; height: 1.5em; color: var(--gravura-vermelho); opacity: .85; transition: opacity var(--dur) var(--curva), transform var(--dur) var(--curva); }
.jp-item-icone svg { width: 100%; height: 100%; }
.jm-grade .jp-item { gap: 10px; }
.jp-item:focus-visible .jp-item-icone, .jp-item:active .jp-item-icone { opacity: 1; transform: scale(1.08); }
@media (hover: hover) { .jp-item:hover .jp-item-icone { opacity: 1; transform: scale(1.08); } }
.jp-item.consulta .jp-item-icone { color: var(--gravura-sombra); }

/* ---------- Condição do bando: cores verde, amarelo e vermelho ---------- */
.tela-jogo { --tom-ganho: #3D6B22; --tom-alerta: #9A6508; --tom-perigo: #9A1F14; }
.jm-info-item.tom-ganho dd, .jp-recurso.tom-ganho dd { color: var(--tom-ganho); }
.jm-info-item.tom-alerta dd, .jp-recurso.tom-alerta dd { color: var(--tom-alerta); }
.jm-info-item.tom-perigo dd, .jp-recurso.tom-perigo dd { color: var(--tom-perigo); }
.jp-stat.tom-ganho .jp-num { color: var(--tom-ganho); }
.jm-info { row-gap: 4px; }
.jm-info-item dd { display: inline-flex; align-items: center; gap: 8px; }
/* botão + da saúde do bando */
.jm-mais {
  display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; cursor: pointer;
  font: 700 1.05rem/1 var(--f-menu); color: var(--gravura-papel); background: var(--gravura-vermelho);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.jm-mais:hover, .jm-mais:focus-visible { outline: 2px solid var(--gravura-tinta); outline-offset: 1px; }
/* custo em horas nos botões do menu, colorido pela velocidade */
.jm-grade .jp-item { flex-wrap: wrap; row-gap: 2px; }
.jm-grade .jp-item-custo { display: block; flex-basis: 100%; margin: 0; text-align: center; font-size: .82rem; }
.jp-item-custo.tom-ganho { color: var(--tom-ganho); }
.jp-item-custo.tom-alerta { color: var(--tom-alerta); }
.jp-item-custo.tom-perigo { color: var(--tom-perigo); }
/* estados de cada cangaceiro (ferimentos, doenças, bônus) */
.jp-estados { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.jp-estado { padding: 1px 8px; border-radius: 10px; font-size: .78rem; line-height: 1.5; border: 1px solid currentColor; }
.jp-estado.tom-ganho { color: var(--tom-ganho); }
.jp-estado.tom-alerta { color: var(--tom-alerta); }
.jp-estado.tom-perigo { color: var(--tom-perigo); }
.jp-membro-dados.tom-ganho .jp-membro-saude { color: var(--tom-ganho); }
.jp-membro-dados.tom-alerta .jp-membro-saude { color: var(--tom-alerta); }
.jp-membro-dados.tom-perigo .jp-membro-saude { color: var(--tom-perigo); }
.jp-membro-saude-cartao { flex-wrap: wrap; }
.jp-membro-saude-cartao > .jp-recursos { flex-basis: 100%; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(57, 40, 21, .3); font-size: .88rem; }
/* listas de condição e saúde: rótulo numa linha, valor ao lado */
.jp-inv-grupo .jp-recursos.largo, .jp-membro-saude-cartao > .jp-recursos { grid-template-columns: max-content minmax(0, 1fr); }
.jp-inv-grupo .jp-recursos.largo dt, .jp-membro-saude-cartao > .jp-recursos dt { white-space: nowrap; }
.jp-membro-saude-cartao > .jp-recursos { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }
@media (max-width: 520px) {
  .jp-inv-grupo .jp-recursos.largo, .jp-membro-saude-cartao > .jp-recursos { grid-template-columns: minmax(0, 1fr); }
  .jp-inv-grupo .jp-recursos.largo dd, .jp-membro-saude-cartao > .jp-recursos dd { justify-self: start; text-align: left; margin-bottom: 4px; }
}

/* ---------- Mapa da região (Mover o bando) ---------- */
.jp-mapa { margin: 0; border: 2px solid var(--gravura-tinta); background: var(--gravura-papel); }
.mapa-regiao { display: block; width: 100%; height: auto; max-height: 52vh; }
.mapa-regiao .mr-fundo { fill: var(--gravura-luz); }
.mapa-regiao .mr-grade line { stroke: var(--gravura-meio); stroke-width: .6; stroke-dasharray: 2 4; opacity: .7; }
.mapa-regiao .mr-rosa path { fill: var(--gravura-tinta); }
.mapa-regiao .mr-rosa .mr-rosa-fina { fill: var(--gravura-sombra); }
.mapa-regiao text { font-family: var(--f-menu); font-weight: 600; font-size: 11px; fill: var(--gravura-tinta); }
.mapa-regiao .mr-escala path { fill: none; stroke: var(--gravura-tinta); stroke-width: 1.2; }
.mapa-regiao .mr-escala text { font-size: 9.5px; }
.mapa-regiao .mr-nome { paint-order: stroke; stroke: var(--gravura-luz); stroke-width: 3.5px; stroke-linejoin: round; }
.mapa-regiao .mr-nome.forte { font-size: 12.5px; }
.mapa-regiao .mr-nome.perigo { fill: var(--gravura-vermelho); }
.mapa-regiao .mr-base { fill: var(--gravura-papel); stroke: var(--gravura-tinta); stroke-width: 1.4; }
.mapa-regiao .mr-local path { fill: var(--gravura-tinta); }
.mapa-regiao .mr-local .mr-vazado { fill: none; stroke: var(--gravura-papel); stroke-width: 1.6; }
.mapa-regiao .mr-local .mr-linha { fill: none; stroke: var(--gravura-tinta); stroke-width: 2; stroke-linecap: round; }
.mapa-regiao .mr-bando .mr-base { fill: var(--gravura-tinta); }
.mapa-regiao .mr-bando path { fill: var(--gravura-luz); }
.mapa-regiao .mr-bando .mr-estrela { fill: var(--gravura-vermelho); }
.mapa-regiao .mr-pulso { fill: none; stroke: var(--gravura-tinta); stroke-width: 1.2; opacity: .5; animation: mr-pulso 2.4s ease-out infinite; }
.mapa-regiao .mr-volante .mr-base { fill: var(--gravura-vermelho); stroke: var(--gravura-breu); }
.mapa-regiao .mr-volante path { fill: var(--gravura-luz); }
.mapa-regiao .mr-caminho { stroke: var(--gravura-vermelho); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .8; }
@keyframes mr-pulso { from { r: 15px; opacity: .6; } to { r: 27px; opacity: 0; } }
:root[data-movimento="reduzido"] .mapa-regiao .mr-pulso { animation: none; }
@media (prefers-reduced-motion: reduce) { .mapa-regiao .mr-pulso { animation: none; } }
.jp-mapa-legenda { margin: 0; font-family: var(--f-narrativa); font-size: .95rem; line-height: 1.35; }
.jp-mapa-opcoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jp-mapa-opcao {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 8px 12px;
  background: rgba(57, 40, 21, .06);
  border: 1px solid var(--gravura-sombra);
  color: var(--gravura-tinta);
  text-align: left;
  cursor: pointer;
}
.jp-mapa-opcao-nome { font-family: var(--f-menu); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; }
.jp-mapa-opcao-custo { grid-column: 2; grid-row: 1; font-family: var(--f-narrativa); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jp-mapa-opcao-custo.tom-ganho { color: var(--tom-ganho); }
.jp-mapa-opcao-custo.tom-alerta { color: var(--tom-alerta); }
.jp-mapa-opcao-custo.tom-perigo { color: var(--tom-perigo); }
.jp-mapa-opcao-detalhe { grid-column: 1 / -1; font-family: var(--f-narrativa); font-size: .9rem; line-height: 1.3; opacity: .85; }
.jp-mapa-opcao.perigo { border-color: var(--gravura-vermelho); }
.jp-mapa-opcao.perigo .jp-mapa-opcao-nome { color: var(--gravura-vermelho); }
.jp-mapa-opcao:hover:not(:disabled), .jp-mapa-opcao:focus-visible { background: rgba(57, 40, 21, .16); outline: 2px solid var(--gravura-tinta); outline-offset: 1px; }
.jp-mapa-opcao:disabled { opacity: .6; cursor: default; }