/* GERADO por tools/build.mjs: concatenação de css/jogo.css. Não edite; edite as fontes. */
/* ===== css/jogo.css ===== */
/* css/jogo.css — páginas de jogo (/hero-core-defense/): carregado depois de estilo.css, só nessas páginas.
   Mesmo vocabulário do site: grade, numerais, cortes por máscara, molduras, números. As cores do jogo
   (--brasa-hcd) aparecem só em seletores iniciados por .figura--hcd, como o --verificar exige. */

/* ---- Abertura da página ---- */
.pagina-jogo .jogo-abertura { padding-top: calc(var(--topo-altura) + 40px); }
.jogo-abertura__voltar { margin-bottom: 28px; text-transform: uppercase; }
.jogo-abertura__voltar a { position: relative; display: inline-block; color: var(--papel-2); }
.jogo-abertura__voltar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--micro) var(--padrao); }
.jogo-abertura__voltar a:hover, .jogo-abertura__voltar a:focus-visible { color: var(--papel); }
.jogo-abertura__voltar a:hover::after, .jogo-abertura__voltar a:focus-visible::after { transform: scaleX(1); }
.jogo-abertura__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--papel-2); }
.jogo-abertura__titulo {
  margin-top: 28px;
  font-size: clamp(2.75rem, 1rem + 9vw, 8.5rem); font-weight: 800; line-height: .92; letter-spacing: -0.025em;
  font-variation-settings: 'wdth' 112;
}
.jogo-abertura__frase { margin-top: 24px; max-width: 28ch; }
.jogo-abertura__lead { margin-top: 20px; max-width: 52ch; }
.jogo-abertura__acoes { margin-top: 28px; }
.jogo-abertura__status { margin-top: 16px; color: var(--papel-2); max-width: 48ch; }
.jogo-abertura__figura { margin-top: 56px; }
.pagina-jogo .moldura--hcd { margin-bottom: 0; }
.pagina-jogo .moldura--hcd .legenda { order: 0; margin: 12px 0 0; }                 /* na página do jogo a legenda fica embaixo */
.pagina-jogo .devorador { right: 4%; bottom: -24px; width: 44%; max-width: 560px; height: auto; max-height: none; }
.pagina-jogo .numeros { margin-top: 48px; }
@media (max-width: 767px) { .pagina-jogo .numero__valor { font-size: clamp(1.75rem, 8vw, 3.25rem); } }   /* "2.240" cabe na célula de 156 px em 360 */
/* a linha do jogo fecha a abertura, como fecha o bloco do jogo na inicial (brasa no HCD, ouro no Taskforge) */
.pagina-jogo .jogo-abertura::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; grid-column: grade-inicio / grade-fim;
  pointer-events: none; animation: respirar 5s ease-in-out infinite alternate;
}
.figura--hcd.pagina-jogo .jogo-abertura::after { background: var(--brasa-hcd); }
.figura--taskforge.pagina-jogo .jogo-abertura::after { background: var(--ouro-taskforge); }
/* os números e a faixa da página não herdam o lugar fixo (grid-row, colunas) que a inicial dá aos blocos dos jogos */
.pagina-jogo .numeros { grid-column: grade-inicio / grade-fim; grid-row: auto; padding-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pagina-jogo .faixa-figura { grid-row: auto; margin-bottom: 0; }

/* ---- Blocos de texto (01), heróis (03), criaturas (04), raridades (05), capturas (07) ---- */
.blocos, .herois, .criaturas, .capturas { display: grid; gap: 32px var(--gutter); }
.bloco__texto, .criatura__texto { margin-top: 12px; }
.herois { gap: 40px var(--gutter); }
.herois__papel { color: var(--papel-2); text-transform: uppercase; }
.herois__alcance { color: var(--papel-2); text-transform: none; }
.heroi { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 0; border-top: 1px solid var(--linha); }
.herois__par .heroi:first-child { margin-top: 12px; }
.heroi__retrato { width: 88px; height: 88px; border: 1px solid var(--linha); background: var(--grafite); }
.heroi__nome { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }
.heroi__epiteto { font-weight: 400; color: var(--papel-2); }
.heroi__atributo { margin-top: 6px; text-transform: uppercase; }
.heroi__habilidades { margin-top: 8px; color: var(--papel-2); }
.herois__nota, .criaturas__elites { margin-top: 40px; color: var(--papel-2); max-width: 60ch; }
.secao--papel .herois__nota, .secao--papel .criaturas__elites, .secao--papel .criatura__texto { color: var(--tinta-2); }
.criatura { padding-top: 20px; border-top: 1px solid var(--linha-papel); }
.criatura__retrato { width: 128px; height: 128px; margin-bottom: 16px; }
.criatura__nome { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); }
.itens__textos { display: grid; gap: 16px; max-width: 60ch; }
.raridades { margin-top: 48px; }
.raridade { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome quantidade" "como como"; column-gap: 16px; row-gap: 6px; padding: 16px 0 20px; border-top: 1px solid var(--linha); }
.raridade__nome { grid-area: nome; }
.raridade__quantidade { grid-area: quantidade; display: flex; align-items: baseline; gap: 8px; }
.raridade__quantidade .fato { font-size: 2rem; }
.raridade__como { grid-area: como; color: var(--papel-2); }
.captura .moldura > picture { aspect-ratio: 16 / 9; }
.captura .moldura > picture img { width: 100%; height: 100%; object-fit: cover; }
.estado__texto { max-width: 60ch; }
.estado__acoes { margin-top: 32px; }
.estado__acompanhe { margin-top: 24px; }

/* ---- Página do Taskforge: heróis com descrição, atos, espécies e pets compactos, subtítulos de bloco ---- */
.herois--quatro .heroi { grid-template-columns: 100px minmax(0, 1fr); border-top: 1px solid var(--linha); }
.heroi__sprite { width: 100px; height: 100px; background: var(--tira-idle) 0 0 / 400px 100px no-repeat; image-rendering: pixelated; }   /* primeiro quadro da tira idle (4 x 100 px) */
.heroi__descricao { margin-top: 8px; }
.heroi__rotulo { color: var(--papel); text-transform: uppercase; }
.textos { display: grid; gap: 16px; max-width: 60ch; }
.atos + .textos, .textos--depois { margin-top: 48px; }
.secao__sub { margin-top: 64px; font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.secao__sub-texto { margin-top: 12px; max-width: 60ch; color: var(--papel-2); }
.secao__sub + .criaturas, .secao__sub-texto + .criaturas, .secao__sub + .blocos, .secao__sub + .textos { margin-top: 32px; }
.secao__lema { color: var(--papel-2); }
.secao--papel .bloco__texto, .secao--papel .textos p, .secao--papel .secao__sub-texto, .secao--papel .secao__lema { color: var(--tinta-2); }
.ato { display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "sprite nome" "sprite paleta" "sprite chefe"; column-gap: 16px; row-gap: 6px; padding: 16px 0 20px; border-top: 1px solid var(--linha); }
.ato__nome { grid-area: nome; } .ato__paleta { grid-area: paleta; } .ato__chefe { grid-area: chefe; }
.ato__sprite, .criatura__sprite { grid-area: sprite; width: 100px; height: 100px; background: var(--tira-idle) 0 0 / 400px 100px no-repeat; image-rendering: pixelated; }   /* primeiro quadro da tira idle (4 x 100 px) */
.criatura__sprite { margin-bottom: 4px; }
.ato__numero { margin-right: 8px; color: var(--papel-2); text-transform: uppercase; }
.ato__paleta, .ato__chefe { color: var(--papel-2); }
.ato__rotulo { text-transform: uppercase; }
.criaturas--compactas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gutter); }
.criaturas--compactas .criatura { padding-top: 16px; border-top-color: var(--linha); }
.criaturas--compactas .criatura__texto { margin-top: 6px; color: var(--papel-2); }
.figura--taskforge .raridade__nome { display: flex; align-items: center; gap: 12px; }
.raridade__icone { width: 48px; height: 48px; flex: none; image-rendering: pixelated; }
.secao--papel .raridade__como, .secao--papel .raridade__quantidade .mono { color: var(--tinta-2); }
.secao--papel .raridade { border-top-color: var(--linha-papel); }

/* cortes de máscara das capturas (4.4), como as figuras da inicial: no filho, nunca no alvo observado */
@media (prefers-reduced-motion: no-preference) {
  html.js .raridades.visivel .odometro__pilha { transform: translateY(calc(-1em * var(--d, 0))); transition: transform 900ms var(--saida-expo) calc(var(--i, 0) * 70ms + var(--j, 0) * 70ms); }
  html.js .captura[data-revelar] > .moldura > picture { clip-path: inset(50% 0 50% 0); }
  html.js .captura.visivel > .moldura > picture { clip-path: inset(0); transition: clip-path 900ms var(--saida-expo) calc(var(--i, 0) * 80ms); }
  html.js .bloco[data-revelar] .bloco__texto, html.js .criatura[data-revelar] .criatura__texto, html.js .heroi { clip-path: inset(-0.1em -0.1em 100% -0.1em); }
  html.js .bloco.visivel .bloco__texto, html.js .criatura.visivel .criatura__texto, html.js .herois__grupo.visivel .heroi { clip-path: inset(-0.1em -0.1em -0.15em -0.1em); transition: clip-path var(--reveal) var(--saida-expo) calc(var(--i, 0) * var(--stagger) + 120ms); }
}
@media (prefers-reduced-motion: reduce) {
  .pagina-jogo .jogo-abertura::after { animation: none; }
  .captura > .moldura > picture, .bloco__texto, .criatura__texto, .heroi { clip-path: none !important; }
}

/* ---- 768 px: oito colunas ---- */
@media (min-width: 768px) {
  .jogo-abertura__meta { grid-column: c 1 / c 7; }
  .jogo-abertura__titulo { grid-column: grade-inicio / grade-fim; }
  .jogo-abertura__frase { grid-column: c 1 / c 6; }
  .jogo-abertura__lead { grid-column: c 1 / c 7; }
  .jogo-abertura__acoes { grid-column: c 1 / c 7; }
  .jogo-abertura__status { grid-column: c 1 / c 7; }
  .pagina-jogo .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pagina-jogo .numeros--oito { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .blocos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .herois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .criaturas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .criaturas--compactas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ato { grid-template-columns: 100px minmax(0, 5fr) minmax(0, 4fr) minmax(0, 6fr); grid-template-areas: "sprite nome paleta chefe"; align-items: center; }
  .ato__sprite, .criatura__sprite { width: 200px; height: 200px; background-size: 800px 200px; }   /* 2x a partir de 768 px, pixel exato */
  .ato { grid-template-columns: 200px minmax(0, 5fr) minmax(0, 4fr) minmax(0, 6fr); }
  .capturas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gutter); }
  .raridade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 3fr); grid-template-areas: "nome quantidade como"; align-items: baseline; }
}

/* ---- 1200 px: doze colunas ---- */
@media (min-width: 1200px) {
  .pagina-jogo .jogo-abertura { padding-top: calc(var(--topo-altura) + 64px); }
  .jogo-abertura__voltar { grid-row: 1; }
  .jogo-abertura__meta { grid-column: c 1 / c 9; grid-row: 2; }
  .jogo-abertura__titulo { grid-row: 3; }
  .jogo-abertura__frase { grid-column: c 1 / c 7; grid-row: 4; }
  .jogo-abertura__lead { grid-column: c 7 / grade-fim; grid-row: 4; margin-top: 28px; }
  .jogo-abertura__acoes { grid-column: c 1 / c 7; grid-row: 5; }
  .jogo-abertura__status { grid-column: c 7 / grade-fim; grid-row: 5; margin-top: 28px; align-self: start; }
  .jogo-abertura__figura { grid-row: 6; }
  .jogo-abertura .numeros { grid-row: 7; }
  .pagina-jogo .faixa-figura { grid-column: grade-inicio / grade-fim; grid-row: 6; margin-top: 56px; }
  .pagina-jogo .devorador { right: 6%; bottom: -40px; width: 38%; }
  .pagina-jogo .numeros--cinco { grid-template-columns: repeat(5, minmax(max-content, 1fr)); }
  .pagina-jogo .numeros--seis { grid-template-columns: repeat(6, minmax(max-content, 1fr)); }
  .pagina-jogo .numeros--oito { grid-template-columns: repeat(8, minmax(max-content, 1fr)); }
  .pagina-jogo .numeros .numero__valor { font-size: clamp(2.75rem, 4.1667vw - 0.25rem, 3.5rem); }
  .blocos { grid-column: c 4 / grade-fim; }
  .herois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--gutter); }
  .herois--quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gutter); }
  .herois__nota, .criaturas__elites { grid-column: c 4 / grade-fim; }
  .criaturas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .itens__textos, .textos, .secao__sub, .secao__sub-texto, .atos { grid-column: c 4 / grade-fim; }
  .itens__textos, .textos { grid-column-end: c 10; }
  .raridades { grid-column: c 4 / grade-fim; }
  .estado__texto { grid-column: c 4 / c 11; }
  .estado__acoes, .estado__acompanhe { grid-column: c 4 / grade-fim; }
}