/* quests.css — janela de Missões (js/ui/windows/quests.js). Medidas em px de arte: calc(N * var(--px)).

   A conta da janela de 592 × 288 em [24, 40]:
     miolo 576 × 272  −  título 14  −  rodapé 10   =  corpo útil 576 × 248
     − cabeçalho (abas + Recolher tudo + relógio) 24 − vão 2  =  lista  576 × 222
   A lista é UMA coluna e rola: cada linha tem cabeçalho (12), descrição (10), barra (6) e rodapé (12) + vãos,
   ~48 px de arte — quatro linhas e meia por tela, que é a densidade das diárias de um dia.

   Nenhum hex aqui: só as variáveis de tema já declaradas (o mesmo critério de codex.css e bestiary.css). */
.quests-body {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  height: 100%;
  overflow: hidden;
}

/* ---- cabeçalho: abas à esquerda, "Recolher tudo (N)" e a contagem regressiva à direita ---------------------- */
/* 24 de altura (eram 16): é a altura do "Recolher tudo", e as abas de 16 ficam no meio dela. */
.quests-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(4 * var(--px));
  flex: none;
  height: calc(24 * var(--px));
}

.quests-tabs {
  display: flex;
  flex: none;
  gap: calc(2 * var(--px));
}

/* "Recolher tudo (N)" e o prazo num invólucro só (docs/specs/quests.md §1): a margem automática o leva para a direita, e a faixa
   vazia fica entre ele e as abas. Quando o cabeçalho QUEBRA (a v2 deitada no celular, `css/v2/content.css`), os dois descem
   juntos — antes o prazo caía sozinho para a 2.ª linha, longe do botão. */
.quests-head-end {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  flex: none;
  margin-left: auto;
}

/* É a AÇÃO da janela: 24 de altura, o alvo do dedo no celular deitado (o molde de `.mail-act` e `.bestiary-claim`). */
.quests-head-end > .btn.quests-claim-all {
  flex: none;
  min-height: calc(24 * var(--px));
  padding: 0 calc(6 * var(--px));
}

/* Largura FIXA do prazo, a do rótulo mais largo: o prazo mudava de largura com a aba ("vira em 08:30:00" 16 letras · "vira na
   segunda" 15 · "não expiram" 11) e o botão andava até 24 px a cada troca. `16ch` = as 16 letras das Diárias na letra da UI
   (`'Courier New', monospace`: `has-ui-font` não liga, `widgets/filterBar.js`), em `ch` para valer também na letra maior da v2.
   O texto encosta à direita, e a pista pontilhada das Diárias (base.css) fica do tamanho do texto porque ele é o mais largo. */
.quests-clock {
  white-space: nowrap;
  min-width: 16ch;
  text-align: right;
}

/* ---- a lista ------------------------------------------------------------------------------------------------ */
.quests-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--px));
  padding-right: calc(2 * var(--px));
}

.quests-status,
.quests-hint {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  padding: calc(4 * var(--px)) 0;
}

.quests-status.hidden,
.quests-hint.hidden {
  display: none;
}

/* ---- cabeçalho de seção (aba Conquistas e o bloco "do dia anterior") --------------------------------------- */
.quests-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(4 * var(--px));
  border-bottom: calc(1 * var(--px)) solid rgba(244, 240, 230, 0.28);
  padding-bottom: calc(1 * var(--px));
  margin-top: calc(2 * var(--px));
}

.quests-expiring {
  color: var(--c-gold);
}

/* ---- uma linha = uma atribuição ---------------------------------------------------------------------------- */
.quests-row {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--px));
  padding: calc(2 * var(--px));
  border: calc(1 * var(--px)) solid rgba(244, 240, 230, 0.18);
  background: var(--c-shade);
}

/* pronta a recolher: o ÚNICO destaque da lista — é o que o olho tem de achar */
.quests-row.is-done {
  border-color: var(--c-gold);
}

/* recolhida: sai do caminho, mas continua legível (a prova de que aquilo foi feito) */
.quests-row.is-claimed {
  opacity: 0.6;
}

.quests-row-head {
  display: flex;
  align-items: baseline;
  gap: calc(3 * var(--px));
}

.quests-mark {
  flex: none;
  width: calc(6 * var(--px));
  text-align: center;
}

.quests-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quests-count {
  flex: none;
  white-space: nowrap;
}

.quests-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- barra de progresso (mesma forma da barra do HUD, sem PNG novo) ---------------------------------------- */
.quests-bar {
  height: calc(4 * var(--px));
  background: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 var(--px) rgba(244, 240, 230, 0.28);
  overflow: hidden;
}

.quests-bar-fill {
  height: 100%;
  background: var(--c-gold);
  transition: width 0.15s linear;
}

.quests-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(4 * var(--px));
  min-height: calc(12 * var(--px));
}

/* G1: o prêmio virou `[moeda] 1.500 · Espada de Ferro ×1` — a moeda é peça, não texto, então a fila é flex e quem
   trunca é o NOME do item (a moeda e o número nunca encolhem: um prêmio com "1.5…" não é prémio nenhum). */
.quests-reward {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.quests-reward > .gold-label,
.quests-reward-sep { flex: none; }

.quests-reward-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- rastreador do HUD (js/ui/widgets/questTracker.js) ------------------------------------------------------
   Duas linhas de 9 px na faixa livre do topo, x 200…440, sem capturar clique e com a mesma geometria de
   `.hud-objective` (dungeon.css).

   A ALTURA muda com o modo, e isso foi medido OLHANDO a tela (quests/PERGUNTAS.md P18): o pacote dava y 41…59 como
   livre, mas na Exploração o `×7 COMBO` mora em y 40 (`hud.css .hud-combo`) e passava POR CIMA das duas linhas. Na
   Exploração a faixa de cima (y 4…22) é que está vazia — a barra de chefe só existe em masmorra e Torre —, então é
   lá que o rastreador fica; em masmorra/Torre ele volta para 41…59, abaixo da barra de objetivo.
   Nada abaixo de y 60 muda. */
.hud-quests {
  position: absolute;
  left: 50%;
  top: calc(4 * var(--px));
  width: calc(240 * var(--px));
  margin-left: calc(-120 * var(--px));
  pointer-events: none;
  text-shadow: var(--px) var(--px) 0 #000;
}

/* Em masmorra e Torre a faixa de cima é da barra de CHEFE: o rastreador desce para baixo da barra de objetivo. */
.scene-dungeon .hud-quests,
.scene-tower .hud-quests {
  top: calc(41 * var(--px));
}

/* Faixa de fundo (o mesmo escuro das linhas do feed de loot): o texto fino de 7 px sem fundo sumia no céu claro e no
   cenário da masmorra. Só cor — a geometria de 9 px por linha não muda. */
.hud-quests:not(.hidden) { background: rgba(10, 8, 14, 0.6); box-shadow: 0 0 0 var(--px) rgba(10, 8, 14, 0.6); }

.hud-quests.hidden,
.hud-quests-line.hidden {
  display: none;
}

/* `flex` só para NÃO colapsar margens: a margem negativa de `.hud-quests-text` (C15, abaixo) puxaria a LINHA inteira
   para cima num bloco comum, em vez de ficar dentro dela. Um contêiner flex não colapsa margens com os filhos. */
.hud-quests-line {
  height: calc(9 * var(--px));
  display: flex;
  flex-direction: column;
}

/* C15 (análise crítica de 2026-09-22): "Área fácil demais: missões pausadas" renderizava "Area" — com a caixa de 7 px e
   `overflow: hidden`, o acento da MAIÚSCULA era cortado (a fonte de 8 px transborda ~1 px acima da linha de 7; ver
   `art/previews/e2e/critic/G41-boss-gate-hud.crop.png`). O `overflow` corta na caixa de PREENCHIMENTO, não na de
   conteúdo: 2 px de `padding-top` (com `box-sizing: border-box`, altura 9 = 2 + 7) dão céu ao acento, e a
   `margin-top: -2` devolve os 2 px ao fluxo — a linha de base do texto e o orçamento de 9 px por linha (7 + 1 de ar +
   1 de barra) ficam exatamente onde estavam. O `box-shadow` de 1 px de `.hud-quests` faz o fundo escuro atrás do acento. */
.hud-quests-text {
  display: block;
  height: calc(9 * var(--px));
  padding-top: calc(2 * var(--px));
  margin-top: calc(-2 * var(--px));
  line-height: calc(7 * var(--px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 1 px de ar + 1 px de barra: com a barra de 2 px colada no texto, o rabo do `p` de "Limpeza"/"campo" ENCOSTAVA nela
   e as duas linhas liam como texto sublinhado (visto no recorte 4× da corrida). O orçamento continua 9 px: 7+1+1. */
.hud-quests-bar {
  height: var(--px);
  margin-top: var(--px);
  background: rgba(0, 0, 0, 0.6);
}

.hud-quests-fill {
  height: 100%;
  background: var(--c-gold);
  transition: width 0.15s linear;
}

/* Barra de rolagem à vista e corte no fim de uma linha inteira (avaliação de UX, rodada 2): sem barra nenhuma a
   última linha visível saía sempre fatiada ao meio pelo rodapé e parecia defeito de render — o jogador não tinha
   como saber que a lista continuava. Mesmo molde de craft.css. */
.quests-list { padding-bottom: calc(6 * var(--px)); scrollbar-width: thin; scrollbar-color: #575273 #12101c; }
@supports selector(::-webkit-scrollbar) {
  .quests-list { scrollbar-width: auto; scrollbar-color: auto; }
  .quests-list::-webkit-scrollbar { width: calc(6 * var(--px)); }
  .quests-list::-webkit-scrollbar-track { background: #12101c; }
  .quests-list::-webkit-scrollbar-thumb { background: #575273; border: var(--px) solid #12101c; }
  .quests-list::-webkit-scrollbar-thumb:hover { background: #8a84a8; }
}

/* O degradê de "a lista continua" é do MECANISMO ÚNICO (`css/scroll-fade.css`, carregada por último): a cópia
   à mão desta folha foi recolhida para lá. */