/* Yume Town: mapa da cidade, casa da amiga, loja e trocas.
   Toda cor sai dos tokens definidos em app.css. */

/* A faixa do mapa rola sozinha na horizontal. overscroll-behavior-x: contain
   impede que o arrastar do mapa vire "voltar página" no Safari do iPhone. */
.mapa-faixa {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
  background: var(--noite-2);
  box-shadow: var(--sombra-card);
  scrollbar-width: none;
}
.mapa-faixa::-webkit-scrollbar { display: none; }
.mapa-svg { display: block; }

.lugar { cursor: pointer; }
.lugar:focus-visible { outline: 3px solid var(--limo); outline-offset: -3px; }
.lugar.trancado { cursor: default; opacity: .75; }
.lugar.alerta { animation: pulsar-casa 2.4s ease-in-out infinite; }
@keyframes pulsar-casa { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

.atalho {
  display: flex; gap: 14px; align-items: center; text-align: left;
  width: 100%; border: 1px solid var(--linha); cursor: pointer;
  color: inherit; font: inherit; min-height: 72px;
}
.atalho .emoji { font-size: 1.9rem; line-height: 1; }
.atalho h2 { font-size: .98rem; }
.atalho small { color: var(--nevoa); }
.atalho:active { transform: translateY(2px); }

.porta { display: grid; justify-items: center; gap: 8px; }
.porta .apelido { font-size: 1.1rem; }
.acoes-casa { display: grid; gap: 10px; }
.titulo-secao { font-size: .95rem; color: var(--nevoa); text-align: center; margin-top: 6px; }
.prateleira { min-height: 96px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.item-estante {
  position: relative; display: grid; justify-items: center; gap: 2px;
  width: 76px; text-align: center;
}
.item-estante small { font-size: .62rem; color: var(--nevoa-fraca); line-height: 1.15; }
.item-estante.r-lendario small { color: var(--limo); }
.item-estante.r-raro small { color: var(--lua); }
/* .repetidos nasceu pro .item-caixa da loja, com espaço de sobra pro número
   flutuar num canto sem tocar o desenho. No tile da estante (76px, desenho
   de 52px quase encostando nas bordas) aquele mesmo canto cai em cima do
   dumpling. Aqui o número sai do canto absoluto e desce pra perto do nome —
   continua visível e legível, só que embaixo do desenho, nunca sobre ele. */
.item-estante .repetidos { position: static; margin-top: -1px; }

/* A tira de saldo na cidade: leva pra loja, mostra quantos Zoombucks a Gi tem. */
.tira-saldo {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; border-radius: 999px;
  background: var(--noite-3); border: 1px solid var(--limo);
  color: var(--limo); font-weight: 800; font-size: .9rem;
}
.saldo-caixa { display: grid; justify-items: center; gap: 2px; }
.saldo-numero { font-family: 'Bungee', sans-serif; font-size: 2rem; color: var(--limo); }

.grade-itens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.item-caixa {
  position: relative; display: grid; justify-items: center; gap: 2px; text-align: center;
  background: var(--noite-2); border: 1px solid var(--linha);
  border-radius: 14px; padding: 10px 6px; min-height: 116px;
}
.item-caixa b { font-size: .72rem; line-height: 1.2; }
.item-caixa small { font-size: .64rem; color: var(--nevoa-fraca); }
/* O item "faltando" precisa continuar parecendo apagado sem que o texto vire
   ilegível. Baixar a opacidade da caixa inteira (como era antes) compõe o
   fundo E o texto contra o que está atrás, e o texto acaba abaixo do mínimo
   de contraste — foi exatamente o defeito que esta regra corrige. Por isso a
   opacidade some daqui e só o desenho (a silhueta) fica discreto; o "???" usa
   um token já mais apagado que o texto normal, e o "Ainda não tem" mantém o
   --nevoa-fraca de sempre — ambos legíveis sobre --noite-2 sem composição. */
.item-caixa.faltando b { color: var(--nevoa); }
.item-caixa .silhueta { font-family: 'Bungee', sans-serif; font-size: 2.6rem; color: var(--linha); line-height: 1.4; opacity: .7; }
.item-caixa.r-raro { border-color: var(--lua); }
.item-caixa.r-lendario { border-color: var(--limo); box-shadow: var(--sombra-neon); }
.repetidos {
  position: absolute; top: 6px; right: 8px; font-size: .68rem; font-weight: 800;
  color: var(--noite); background: var(--limo); border-radius: 999px; padding: 1px 6px;
}

.atalho.destaque { border-color: var(--limo); box-shadow: var(--sombra-neon); }
.lista-trocas { display: grid; gap: 10px; }
.troca-card { display: grid; gap: 8px; justify-items: center; text-align: center; }
.troca-itens { display: flex; align-items: center; gap: 12px; }
.troca-lado { display: grid; justify-items: center; gap: 2px; width: 84px; }
.troca-lado small { font-size: .64rem; color: var(--nevoa-fraca); line-height: 1.15; }
.troca-seta { font-size: 1.2rem; }
.troca-botoes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.escolha-itens { display: grid; gap: 8px; width: 100%; }
/* Duas seções bem separadas na folha de escolha (trocar vs. presentear) —
   mais espaço entre elas que entre os botões de uma mesma seção. */
.escolha-secoes { display: grid; gap: 14px; width: 100%; }
.escolha-secoes .titulo-secao { margin: 0; }
.escolha-secoes .aviso { margin: 0; font-size: .82rem; text-align: center; }
button.item-estante { background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
button.item-estante:disabled { cursor: default; }

.revelacao {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--veu); padding: 20px;
}
.revelacao-conteudo {
  display: grid; justify-items: center; gap: 8px; text-align: center;
  background: var(--noite-2); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 24px; max-width: 300px; width: 100%;
  animation: surgir-item .35s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes surgir-item { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }