/* HUD do mundo (src/hud/): camada fixa por cima da cena. Não altera o fluxo da página:
   tudo é position: fixed ou <dialog>, então cena, palco e tamanho do Snoopy ficam iguais.
   Branco translúcido, dourado discreto só nos cookies, sombras leves. */

.mundo {
  --hud-vidro: rgba(255, 255, 255, .62);
  --hud-vidro-forte: rgb(255 253 252 / .94);
  --hud-borda: var(--color-border);
  --hud-sombra: var(--shadow-sm);
  --hud-sombra-alta: var(--shadow-lg);
  --hud-ouro: #b58c3c;
  --hud-trilho: rgb(var(--color-text-rgb) / .07);
  --hud-raio: 20px;
  --notificacoes-topo: 52px; /* logo abaixo da faixa da HUD (notificacoes.css) */
}

.hud-emoji { font-style: normal; line-height: 1; }

/* Topo: carteira à esquerda; Conquistas e menu à direita (ícones SVG de src/shared/icones.js).
   Ocupa a faixa reservada por --topo-hud em mundo.css, acima do céu: não cobre sol, saudação nem Snoopy. */
.hud {
  position: fixed; z-index: 20; top: 12px; left: 12px; right: 12px;
  display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none;
}
.hud > * { pointer-events: auto; }

.hud-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 32px;
  border: 1px solid var(--hud-borda); border-radius: 999px;
  background: var(--hud-vidro); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: var(--hud-sombra); color: var(--ink);
}

/* Carteira */
/* Carteira global de cookies: conteúdo e animações em carteira.css; aqui só o tamanho na HUD. */
.hud-carteira { padding: 0 12px 0 5px; font-size: .88rem; }

/* Ícones do lado direito: botões redondos discretos, mesmo vidro da carteira. */
.hud-acoes { display: flex; align-items: center; gap: 6px; }
.hud-icone {
  position: relative; justify-content: center; width: 32px; padding: 0; cursor: pointer;
  color: rgb(var(--color-text-rgb) / .78); transition: background-color .2s, color .2s, transform .2s;
}
.hud-icone svg { display: block; width: 18px; height: 18px; }
.hud-icone-svg { display: contents; }
.hud-icone:hover, .hud-botao-menu[aria-expanded="true"] { background: var(--hud-vidro-forte); color: var(--ink); }
.hud-icone:active { transform: scale(.95); }

/* Menu */
.hud-menu { position: relative; }
.hud-menu-lista {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 11.5rem; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--hud-borda); border-radius: 18px; background: var(--hud-vidro-forte);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--hud-sombra-alta);
  transform-origin: top right; animation: hud-surgir .18s ease-out;
}
.hud-menu-lista[hidden] { display: none; }
.hud-menu-item {
  display: flex; box-sizing: border-box; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; white-space: nowrap;
  font: .9rem var(--font-sans); cursor: pointer; transition: background-color .15s;
}
.hud-menu-item:hover, .hud-menu-item:focus-visible { background: rgb(var(--color-text-rgb) / .05); outline: none; }
.hud-menu-item .hud-emoji { width: 1.25rem; text-align: center; }
.hud-menu-item[aria-disabled="true"] { color: var(--suave, var(--color-text-secondary)); cursor: default; }
.hud-menu-item[aria-disabled="true"]:hover { background: none; }
.hud-menu-nota { margin-left: auto; padding-left: 12px; font: .6rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; }

.hud-pill:focus-visible, .hud-icone:focus-visible, .hud-fechar:focus-visible, .hud-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Botão fechar (janela e status) */
.hud-fechar {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgb(var(--color-text-rgb) / .05); color: var(--suave, var(--color-text-secondary));
  font: 1.1rem/1 var(--font-sans); cursor: pointer; transition: background-color .15s, color .15s;
}
.hud-fechar:hover { background: rgb(var(--color-text-rgb) / .09); color: var(--ink); }

/* Barras (status e conquistas) */
.hud-barra { display: block; height: 6px; border-radius: 999px; background: var(--hud-trilho); overflow: hidden; }
.hud-barra-valor { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--hud-cor, var(--ink)); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.hud-barra-fina { height: 4px; margin-top: 10px; }

/* Status do Snoopy: painel pequeno, não modal. Celular/tablet: rodapé, logo acima da navegação inferior; desktop largo: lateral,
   fora da coluna do mundo (26rem), para não cobrir o personagem. */
.hud-status {
  position: fixed; z-index: 25; inset: auto auto calc(var(--hud-nav-reserva, 8px) + 8px) 50%; transform: translateX(-50%);
  width: min(19rem, calc(100% - 32px)); margin: 0; padding: 14px 16px 16px;
  border: 1px solid var(--hud-borda); border-radius: var(--hud-raio); color: var(--ink);
  background: var(--hud-vidro-forte); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--hud-sombra-alta);
}
.hud-status[open] { animation: hud-subir .26s ease-out; }
.hud-status-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hud-status-titulo, .hud-janela-titulo { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 1.5rem/1 var(--font-serif); letter-spacing: -.01em; }
.hud-status-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hud-status-item { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; }
.hud-status-rotulo { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.hud-status-numero { font: .68rem var(--font-mono); color: var(--suave, var(--color-text-secondary)); align-self: center; }
.hud-status-item .hud-barra { grid-column: 1 / -1; }
[data-status="hunger"] { --hud-cor: #d6a468; }
[data-status="water"] { --hud-cor: #8db4c6; }
[data-status="happiness"] { --hud-cor: #d69a9a; }

/* Janela modal (conquistas, inventário) */
.hud-janela {
  width: min(28rem, calc(100% - 24px)); max-height: min(40rem, calc(100dvh - 48px)); padding: 0;
  border: 1px solid var(--hud-borda); border-radius: 24px; color: var(--ink);
  background: var(--color-surface-soft); box-shadow: var(--hud-sombra-alta); overflow: hidden;
}
.hud-janela[open] { display: flex; flex-direction: column; animation: hud-surgir .22s ease-out; }
.hud-janela::backdrop { background: rgb(var(--color-text-rgb) / .16); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.hud-janela-topo { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 4px; }
.hud-janela-titulo { font-size: 1.9rem; }
.hud-janela-corpo { padding: 8px 20px 22px; overflow-y: auto; }
.hud-resumo { margin: 0 0 14px; font: .68rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--suave, var(--color-text-secondary)); }

/* Conquistas */
.hud-conquistas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hud-conquista {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px;
  border: 1px solid var(--hud-borda); border-radius: 18px; background: #fff;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.hud-conquista:hover { transform: translateY(-1px); box-shadow: var(--hud-sombra); }
.hud-conquista-emoji { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--paper); font-size: 1.35rem; }
.hud-conquista-titulo { margin: 0; font: 500 .95rem/1.25 var(--font-sans); letter-spacing: 0; }
.hud-conquista-descricao { margin: 2px 0 0; font-size: .8rem; line-height: 1.4; color: var(--suave, var(--color-text-secondary)); }
.hud-conquista-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.hud-selo { white-space: nowrap; font: .68rem var(--font-mono); letter-spacing: .03em; color: var(--suave, var(--color-text-secondary)); }
.hud-selo.is-concluida { color: var(--color-success); }
.hud-recompensa { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(228, 193, 112, .18); color: #8a6a2b; font: 500 .75rem var(--font-sans); }
.hud-conquista.is-concluida { --hud-cor: #a9bf97; }
.hud-conquista.is-andamento { --hud-cor: #e4c170; }
.hud-conquista.is-bloqueada { background: rgba(255, 255, 255, .5); }
.hud-conquista.is-bloqueada .hud-conquista-emoji { filter: grayscale(1); opacity: .45; }
.hud-conquista.is-bloqueada .hud-conquista-titulo { color: var(--suave, var(--color-text-secondary)); }

/* Inventário */
.hud-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 10px; }
.hud-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 12px; border: 1px solid var(--hud-borda); border-radius: 18px; background: #fff; text-align: center; }
.hud-item-emoji { font-size: 1.8rem; line-height: 1.2; }
.hud-item-nome { font-size: .85rem; font-weight: 500; }
.hud-item-meta { font: .62rem var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--suave, var(--color-text-secondary)); }
.hud-vazio { padding: 28px 8px 16px; text-align: center; }
.hud-vazio-emoji { font-size: 2.2rem; opacity: .8; }
.hud-vazio-titulo { margin: 10px 0 4px; font: italic 400 1.25rem var(--font-serif); }
.hud-vazio-texto { margin: 0; font-size: .82rem; color: var(--suave, var(--color-text-secondary)); }

/* Snoopy clicável (abre o status). Só o cursor; tamanho e posição não mudam. */
.hud-interativo { cursor: pointer; }

@keyframes hud-selo { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes hud-surgir { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes hud-subir { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes hud-subir-lateral { from { opacity: 0; transform: translate(8px, -50%); } to { opacity: 1; transform: translateY(-50%); } }

@media (max-width: 380px) {
  .hud { top: 12px; left: 10px; right: 10px; }
  .hud-pill { height: 30px; }
  .hud-acoes { gap: 5px; }
  .hud-icone { width: 30px; }
  .hud-icone svg { width: 17px; height: 17px; }
  .hud-carteira { padding: 0 10px 0 4px; font-size: .82rem; }
  .hud-conquista { grid-template-columns: auto 1fr; }
  .hud-conquista-lado { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
}
/* Tablet/desktop: a coluna do mundo tem 26rem; os cantos da tela ficam livres. */
@media (min-width: 640px) {
  .mundo { --notificacoes-topo: 70px; }
  .hud { top: 20px; left: 24px; right: 24px; }
  .hud-pill { height: 36px; gap: 8px; }
  .hud-carteira { padding: 0 15px 0 6px; font-size: .95rem; }
  .hud-acoes { gap: 8px; }
  .hud-icone { width: 36px; }
  .hud-icone:hover { transform: translateY(-1px); }
}
@media (min-width: 1100px) {
  .hud-status { inset: 50% 32px auto auto; transform: translateY(-50%); }
  .hud-status[open] { animation-name: hud-subir-lateral; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-menu-lista, .hud-status[open], .hud-janela[open] { animation: none; }
  .hud-barra-valor, .hud-conquista, .hud-icone { transition: none; }
}