/*
  Minha Gameteca — Etapa 2 (CSS, layout e responsividade)

  Organização deste arquivo:
    1. Identidade visual (tokens, Box Model, tipografia, links)
    2. Layout da página (topo, rodapé, grid principal)
    3. Botões e estados de interação
    4. Formulários (cadastro, edição, busca e filtros)
    5. Mensagens e avisos
    6. Listagem, busca, filtros e resumo
    7. Página de detalhes e confirmação de exclusão
    8. Responsividade (Media Queries)

  Abordagem mobile-first: os estilos base servem para telas pequenas e
  as Media Queries (min-width) ampliam o layout para telas maiores.
*/


/* ==========================================================================
   1. IDENTIDADE VISUAL
   Direção: cartuchos de jogo. Bordas firmes, sombras sólidas deslocadas e
   cor de status como informação. Violeta é a cor do logotipo (Etapa 1).
   ========================================================================== */

:root {
  /* Cores base */
  --tinta: #1D1B3A;            /* texto e bordas */
  --tinta-suave: #4E4C73;      /* texto secundário */
  --violeta: #4F35C9;          /* ação principal, links, foco */
  --violeta-escuro: #3A24A8;   /* hover da ação principal */
  --fundo: #EFEEF8;            /* fundo da página */
  --papel: #FFFFFF;            /* superfícies (cards, campos) */
  --ambar: #F2B705;            /* foco sobre o topo escuro */
  --linha-campo: #5C5A80;      /* borda de campos de formulário */

  /* Perigo (excluir, erros) */
  --perigo: #B3203A;
  --perigo-escuro: #8F1830;
  --perigo-fundo: #FFE8EC;
  --perigo-texto: #8B1428;

  /* Sucesso e informação */
  --sucesso-fundo: #DDF4E4;
  --sucesso-texto: #0F5A2A;
  --info-fundo: #E3EEFF;
  --info-texto: #0B3F85;

  /* Cores de status do jogo: faixa, fundo do selo e texto do selo */
  --quero-jogar-faixa: #1B6FD1;
  --quero-jogar-fundo: #DCEBFF;
  --quero-jogar-texto: #0B3F85;
  --jogando-faixa: #E0A100;
  --jogando-fundo: #FFEFC2;
  --jogando-texto: #6B4300;
  --zerado-faixa: #1F9D4D;
  --zerado-fundo: #D5F2DD;
  --zerado-texto: #0F5A2A;
  --abandonado-faixa: #D6334F;
  --abandonado-fundo: #FFDDE2;
  --abandonado-texto: #8B1428;

  /* Tipografia */
  --fonte-titulo: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Atkinson Hyperlegible", "Segoe UI", Verdana, system-ui, sans-serif;

  /* Escala de espaçamento (rem) */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;

  /* Forma: borda firme e sombra sólida (efeito de cartucho) */
  --borda: 2px solid var(--tinta);
  --raio: 0.5rem;
  --sombra: 0.25rem 0.25rem 0 var(--tinta);
  --sombra-pequena: 0.125rem 0.125rem 0 var(--tinta);

  /* Largura máxima do conteúdo */
  --largura-max: 72rem;
}


/* ---- Box Model e base ---------------------------------------------------- */

/* border-box: width e height passam a incluir padding e borda. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;           /* respeita a preferência de tamanho do usuário */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte-texto);
  font-size: 1.0625rem;      /* 17px: confortável para leitura */
  line-height: 1.55;
  color: var(--tinta);
  background-color: var(--fundo);
}

/* O atributo hidden precisa vencer qualquer display definido nas classes. */
[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ---- Tipografia ---------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0 0 var(--esp-3);
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
}

h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 var(--esp-4);
  max-width: 68ch;           /* linhas curtas leem melhor */
}

strong {
  font-weight: 700;
}

small {
  font-size: 0.875rem;
}

abbr[title] {
  text-decoration: none;     /* o asterisco de campo obrigatório não precisa de sublinhado */
  cursor: help;
}

ul,
ol {
  margin-top: 0;
}


/* ---- Links --------------------------------------------------------------- */

a {
  color: var(--violeta);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--violeta-escuro);
  text-decoration-thickness: 0.18em;
}


/* ==========================================================================
   2. LAYOUT DA PÁGINA
   Flexbox: topo, navegação, rodapé e estrutura vertical da página.
   Grid: áreas da página principal (busca, lista e resumo).
   ========================================================================== */

/* Estrutura vertical: o rodapé desce até o fim da janela em páginas curtas. */
body {
  display: flex;
  flex-direction: column;
}

/*
  Margem lateral que limita o conteúdo a --largura-max e mantém o fundo do
  topo e do rodapé de ponta a ponta. Em telas pequenas vale o mínimo de 1rem.
*/
body > header,
main,
body > footer {
  padding-inline: max(var(--esp-4), calc((100% - var(--largura-max)) / 2));
}


/* ---- Topo ---------------------------------------------------------------- */

body > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding-block: var(--esp-4);
  color: var(--papel);
  background-color: var(--tinta);
  border-bottom: 4px solid var(--violeta);
}

body > header > img {
  width: 3rem;
  height: 3rem;
  flex: none;
}

body > header > div {
  flex: 1 1 14rem;           /* ocupa o espaço livre e quebra de linha se faltar */
  min-width: 0;
}

body > header h1 {
  margin: 0;
  color: var(--papel);
}

body > header p {
  margin: 0;
  font-size: 0.9375rem;
  color: #DAD6FF;
}

/* Navegação principal: lista horizontal que quebra linha quando precisa */
body > header nav {
  flex: 1 1 100%;
}

body > header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

body > header nav a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  font-weight: 700;
  color: #DAD6FF;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--raio);
}

body > header nav a[aria-current="page"] {
  color: var(--papel);
  background-color: var(--violeta);
}


/* ---- Corpo da página (grid) ---------------------------------------------- */

main {
  flex: 1 0 auto;            /* empurra o rodapé para baixo */
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* minmax(0, …) evita estouro lateral */
  gap: var(--esp-5);
  align-content: start;
  padding-block: var(--esp-5) var(--esp-7);
}

/* Páginas de formulário e detalhes: coluna de leitura confortável */
.pagina-formulario > *,
.pagina-detalhe > * {
  max-width: 56rem;
}

/* Página da coleção: áreas nomeadas (o desktop reorganiza em Media Query) */
.pagina-colecao > .aviso {
  grid-area: aviso;
}

.area-busca {
  grid-area: busca;
}

.area-lista {
  grid-area: lista;
}

.area-resumo {
  grid-area: resumo;
}

.pagina-colecao {
  grid-template-areas:
    "aviso"
    "busca"
    "lista"
    "resumo";
}


/* ---- Superfícies (painéis) ---------------------------------------------- */

.painel,
.area-busca,
.area-resumo {
  padding: var(--esp-4);
  background-color: var(--papel);
  border: var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}


/* ---- Trilha de navegação (breadcrumb) ------------------------------------ */

.trilha ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
  color: var(--tinta-suave);
  list-style: none;
}

.trilha li + li::before {
  content: "/";
  margin-right: var(--esp-2);
}

.trilha [aria-current="page"] {
  font-weight: 700;
  color: var(--tinta);
}


/* ---- Rodapé -------------------------------------------------------------- */

body > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-5);
  padding-block: var(--esp-5);
  font-size: 0.9375rem;
  color: var(--tinta-suave);
  background-color: var(--papel);
  border-top: var(--borda);
}

body > footer p {
  margin: 0;
}


/* ---- Link "pular para o conteúdo" (acessibilidade) ----------------------- */

.pular-link {
  position: absolute;
  top: -5rem;                /* fora da tela até receber foco */
  left: var(--esp-4);
  z-index: 10;
  padding: var(--esp-2) var(--esp-4);
  font-weight: 700;
  color: var(--tinta);
  text-decoration: none;
  background-color: var(--ambar);
  border: var(--borda);
  border-radius: var(--raio);
}

.pular-link:focus {
  top: var(--esp-2);
}


/* ==========================================================================
   3. BOTÕES E ESTADOS DE INTERAÇÃO
   Vale para <a> e <button> com a classe .botao. O botão "afunda" ao ser
   clicado (a sombra some e ele se desloca), como um botão físico.
   ========================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: 2.75rem;       /* alvo de toque confortável */
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: var(--tinta);
  background-color: var(--papel);
  border: var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-pequena);
  transition: background-color 0.15s ease, color 0.15s ease,
              transform 0.1s ease, box-shadow 0.1s ease;
}

.botao:hover {
  transform: translate(-1px, -1px);
  box-shadow: 0.1875rem 0.1875rem 0 var(--tinta);
}

.botao:active {
  transform: translate(0.125rem, 0.125rem);
  box-shadow: none;
}

.botao:disabled,
.botao[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--tinta-suave);
  background-color: var(--fundo);
  border-color: var(--tinta-suave);
  box-shadow: none;
  transform: none;
}

/* Variações */
.botao--primario {
  color: var(--papel);
  background-color: var(--violeta);
}

.botao--primario:hover {
  color: var(--papel);
  background-color: var(--violeta-escuro);
}

.botao--secundario:hover {
  background-color: var(--fundo);
}

.botao--perigo {
  color: var(--papel);
  background-color: var(--perigo);
}

.botao--perigo:hover {
  color: var(--papel);
  background-color: var(--perigo-escuro);
}

.botao--fantasma {
  padding-inline: var(--esp-1);
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.botao--fantasma:hover {
  color: var(--violeta-escuro);
  background-color: transparent;
  box-shadow: none;
  transform: none;
}

.botao--pequeno {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.9375rem;
}

/* Grupo de botões: linha que quebra quando falta espaço */
.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: center;
  max-width: none;           /* algumas ações são <p>, que limitam a largura */
  margin: 0;
}


/* ---- Links da navegação principal: hover e página atual ------------------ */

body > header nav a:hover {
  color: var(--papel);
  background-color: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.45);
}

body > header nav a[aria-current="page"]:hover {
  background-color: var(--violeta-escuro);
  border-color: transparent;
}


/* ---- Foco visível (teclado) --------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 3px;
}

/* Sobre o topo escuro o violeta perde contraste: usa âmbar */
body > header :focus-visible {
  outline-color: var(--ambar);
}


/* ---- Movimento reduzido -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .botao:hover,
  .botao:active,
  .jogo:hover {
    transform: none;
  }
}


/* ==========================================================================
   4. FORMULÁRIOS (cadastro, edição, busca e filtros)
   ========================================================================== */

label {
  display: block;
  margin-bottom: var(--esp-1);
  font-weight: 700;
}

/* Asterisco de campo obrigatório */
label abbr,
legend abbr {
  font-weight: 800;
  color: var(--perigo);
}

input,
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--tinta);
  background-color: var(--papel);
  border: 2px solid var(--linha-campo);
  border-radius: var(--raio);
  accent-color: var(--violeta);
}

textarea {
  min-height: 7rem;
  resize: vertical;          /* só altura: evita estourar o layout */
}

::placeholder {
  color: #6B6990;            /* contraste de 5,2:1 sobre o branco */
  opacity: 1;
}

/* Estados dos campos */
input:hover,
select:hover,
textarea:hover {
  border-color: var(--tinta);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--violeta);
  outline: 3px solid var(--violeta);
  outline-offset: 2px;
}

/* Só marca erro depois que a pessoa interagiu com o campo */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
  border-color: var(--perigo);
  background-color: var(--perigo-fundo);
}

input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
  color: var(--tinta-suave);
  background-color: var(--fundo);
}

.campo {
  min-width: 0;              /* campos em grid não podem forçar largura */
}

.ajuda {
  display: block;
  margin-top: var(--esp-1);
  color: var(--tinta-suave);
}

.nota-obrigatorio {
  font-size: 0.9375rem;
  color: var(--tinta-suave);
}


/* ---- Grupos de campos (fieldset) ----------------------------------------- */

fieldset {
  min-width: 0;              /* fieldset tem min-width implícito que causa rolagem lateral */
  margin: 0 0 var(--esp-5);
  padding: var(--esp-4);
  border: 2px solid var(--tinta);
  border-radius: var(--raio);
}

legend {
  padding: 0 var(--esp-2);
  font-family: var(--fonte-titulo);
  font-size: 1.0625rem;
  font-weight: 800;
}

/* Grid responsivo: tantas colunas de 15rem quanto couberem */
.formulario fieldset {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--esp-4) var(--esp-5);
}

/* Campos longos ocupam a linha toda */
.formulario .campo:has(input[name="titulo"]),
.formulario .campo:has(textarea),
.formulario .campo:has(input[type="url"]),
.formulario .opcoes {
  grid-column: 1 / -1;
}


/* ---- Status como opções em formato de "chip" ----------------------------- */

.formulario .opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.opcoes legend {
  margin-bottom: var(--esp-2);
  padding: 0;
  font-family: var(--fonte-texto);
  font-size: 1rem;
}

.opcao {
  position: relative;
}

/* O botão de rádio real continua no HTML (teclado e leitor de tela), só escondido */
.opcao input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
}

.opcao label {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
  background-color: var(--papel);
  border: 2px solid var(--linha-campo);
  border-radius: 999px;
}

.opcao label:hover {
  background-color: var(--fundo);
  border-color: var(--tinta);
}

.opcao input:focus-visible {
  outline: none;             /* o foco aparece no rótulo, que é o que se vê */
}

.opcao input:focus-visible + label {
  outline: 3px solid var(--violeta);
  outline-offset: 3px;
}

/* Opção marcada: cor do status + sinal "✓", para não depender só da cor */
.opcao input:checked + label::before {
  content: "\2713";
  font-weight: 800;
}

.opcao input[value="quero-jogar"]:checked + label {
  color: var(--quero-jogar-texto);
  background-color: var(--quero-jogar-fundo);
  border-color: var(--quero-jogar-faixa);
}

.opcao input[value="jogando"]:checked + label {
  color: var(--jogando-texto);
  background-color: var(--jogando-fundo);
  border-color: var(--jogando-faixa);
}

.opcao input[value="zerado"]:checked + label {
  color: var(--zerado-texto);
  background-color: var(--zerado-fundo);
  border-color: var(--zerado-faixa);
}

.opcao input[value="abandonado"]:checked + label {
  color: var(--abandonado-texto);
  background-color: var(--abandonado-fundo);
  border-color: var(--abandonado-faixa);
}


/* ---- Busca na API (cadastro) --------------------------------------------- */

.painel--api {
  border-style: dashed;      /* opcional: pesa menos que o formulário principal */
  box-shadow: none;
}

/* Campo de busca com botão ao lado */
.campo--com-botao {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-2);
  align-items: end;
  margin-bottom: var(--esp-5);
}

.campo--com-botao label {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.resultados-api {
  display: grid;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-4);
  padding: 0;
  list-style: none;
}

.resultados-api li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  background-color: var(--fundo);
  border: 2px solid var(--tinta);
  border-radius: var(--raio);
}

.resultados-api .botao {
  margin-left: auto;         /* empurra o botão para a direita */
}


/* ==========================================================================
   5. MENSAGENS E AVISOS
   ========================================================================== */

.mensagem,
.aviso {
  display: flex;
  gap: var(--esp-3);
  align-items: flex-start;
  max-width: none;
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border: 2px solid;
  border-radius: var(--raio);
}

/* Ícone textual de cada tipo de mensagem */
.mensagem::before,
.aviso::before {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 800;
  line-height: 1;
  color: var(--papel);
  border-radius: 50%;
}

.mensagem--erro {
  color: var(--perigo-texto);
  background-color: var(--perigo-fundo);
  border-color: var(--perigo);
}

.mensagem--erro::before {
  content: "!";
  background-color: var(--perigo);
}

.mensagem--sucesso {
  color: var(--sucesso-texto);
  background-color: var(--sucesso-fundo);
  border-color: var(--zerado-faixa);
}

.mensagem--sucesso::before {
  content: "\2713";
  background-color: var(--zerado-faixa);
}

.aviso--info {
  color: var(--info-texto);
  background-color: var(--info-fundo);
  border-color: var(--quero-jogar-faixa);
}

.aviso--info::before {
  content: "i";
  background-color: var(--quero-jogar-faixa);
}

/* Lista vazia: convite para agir, não só um aviso */
.mensagem--vazia {
  justify-content: center;
  padding: var(--esp-6) var(--esp-4);
  color: var(--tinta-suave);
  background-color: var(--papel);
  border-style: dashed;
  border-color: var(--tinta-suave);
}

.mensagem--vazia::before {
  display: none;
}

/*
  Mensagens do formulário aparecem sozinhas, só com CSS:
  - erro, quando algum campo foi tocado e está inválido;
  - sucesso, quando todos os campos obrigatórios estão válidos.
*/
.formulario .mensagem {
  display: none;
  margin-bottom: var(--esp-4);
}

.formulario:has(:user-invalid) .mensagem--erro {
  display: flex;
}

.formulario:valid .mensagem--sucesso {
  display: flex;
}


/* ==========================================================================
   6. LISTAGEM, BUSCA, FILTROS E RESUMO
   ========================================================================== */

/* ---- Cor de status: uma regra só alimenta cards, selos e detalhes ---------- */

[data-status="quero-jogar"] {
  --faixa: var(--quero-jogar-faixa);
  --selo-fundo: var(--quero-jogar-fundo);
  --selo-texto: var(--quero-jogar-texto);
}

[data-status="jogando"] {
  --faixa: var(--jogando-faixa);
  --selo-fundo: var(--jogando-fundo);
  --selo-texto: var(--jogando-texto);
}

[data-status="zerado"] {
  --faixa: var(--zerado-faixa);
  --selo-fundo: var(--zerado-fundo);
  --selo-texto: var(--zerado-texto);
}

[data-status="abandonado"] {
  --faixa: var(--abandonado-faixa);
  --selo-fundo: var(--abandonado-fundo);
  --selo-texto: var(--abandonado-texto);
}

.selo {
  display: inline-block;
  padding: 0.125rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--selo-texto);
  background-color: var(--selo-fundo);
  border: 2px solid var(--faixa);
  border-radius: 999px;
}


/* ---- Busca, filtros e ordenação ------------------------------------------ */

.area-busca h2,
.area-resumo h2,
.painel h2 {
  margin-bottom: var(--esp-4);
}

.area-busca form {
  display: grid;
  gap: var(--esp-4);
}

.area-busca fieldset {
  margin: 0;
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--esp-3) var(--esp-4);
}

.area-busca .acoes {
  align-self: end;
}


/* ---- Lista de jogos ------------------------------------------------------- */

.contador {
  margin: 0 0 var(--esp-3);
  font-weight: 700;
  color: var(--tinta-suave);
}

.lista-jogos {
  display: grid;
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Card: capa à esquerda e dados à direita (telas pequenas) */
.jogo {
  position: relative;
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
  background-color: var(--papel);
  border: var(--borda);
  border-left: 0.5rem solid var(--faixa, var(--tinta));   /* lombada colorida pelo status */
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.jogo:hover {
  transform: translate(-2px, -2px);
  box-shadow: 0.375rem 0.375rem 0 var(--tinta);
}

.jogo img {
  grid-row: 1 / -1;          /* a capa ocupa a altura toda do card */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-right: var(--borda);
}

.jogo h3 {
  grid-column: 2;
  margin: 0;
  padding: var(--esp-3) var(--esp-4) 0;
}

.jogo dl {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.125rem var(--esp-3);
  align-content: start;
  margin: 0;
  padding: var(--esp-2) var(--esp-4);
  font-size: 0.9375rem;
}

.jogo dt {
  color: var(--tinta-suave);
}

.jogo dd {
  margin: 0;
  font-weight: 700;
}

.jogo .selo {
  justify-self: start;       /* o selo não estica na célula do grid */
}

/* Ações em grade: "Ver detalhes" na linha de cima; "Editar" e "Excluir" dividem a de baixo */
.jogo .acoes {
  grid-column: 2;
  align-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--esp-2) var(--esp-4) var(--esp-3);
  gap: var(--esp-2);
}

.jogo .acoes .botao--primario {
  grid-column: 1 / -1;
}

.jogo .botao {
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.9375rem;
}


/* ---- Resumo da coleção (aside) ------------------------------------------- */

.area-resumo table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.area-resumo caption {
  margin-bottom: var(--esp-2);
  font-weight: 800;
  text-align: left;
}

.area-resumo th,
.area-resumo td {
  padding: var(--esp-2) var(--esp-3);
  text-align: left;
  border-bottom: 2px solid var(--fundo);
}

.area-resumo thead th {
  color: var(--tinta-suave);
  border-bottom-color: var(--tinta);
}

.area-resumo td {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;         /* números alinhados à direita */
}

.area-resumo thead th:last-child {
  text-align: right;
}

.area-resumo tfoot th,
.area-resumo tfoot td {
  border-top: 2px solid var(--tinta);
  border-bottom: 0;
}

/* Bolinha de cor antes de cada status (seletor estrutural :nth-child) */
.area-resumo tbody th::before {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--esp-2);
  vertical-align: baseline;
  background-color: var(--bolinha);
  border-radius: 50%;
}

.area-resumo tbody tr:nth-child(1) th { --bolinha: var(--quero-jogar-faixa); }
.area-resumo tbody tr:nth-child(2) th { --bolinha: var(--jogando-faixa); }
.area-resumo tbody tr:nth-child(3) th { --bolinha: var(--zerado-faixa); }
.area-resumo tbody tr:nth-child(4) th { --bolinha: var(--abandonado-faixa); }

.area-resumo ul {
  display: grid;
  gap: var(--esp-1);
  margin: var(--esp-4) 0;
  padding: 0;
  list-style: none;
}

.area-resumo li {
  padding: var(--esp-2) 0;
  border-top: 2px dashed var(--fundo);
}

.area-resumo p {
  margin-bottom: 0;
}


/* ==========================================================================
   7. PÁGINA DE DETALHES E CONFIRMAÇÃO DE EXCLUSÃO
   ========================================================================== */

/* Ficha do jogo: Grid com áreas nomeadas (uma coluna no celular) */
.detalhe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "topo"
    "capa"
    "dados"
    "obs"
    "api"
    "acoes";
  gap: var(--esp-4) var(--esp-5);
  padding: var(--esp-4);
  background-color: var(--papel);
  border: var(--borda);
  border-top: 0.75rem solid var(--faixa, var(--tinta));   /* lombada de status no topo */
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.detalhe > header {
  grid-area: topo;
}

.detalhe > figure {
  grid-area: capa;
}

.bloco-dados {
  grid-area: dados;
}

.bloco-observacoes {
  grid-area: obs;
}

.bloco-api {
  grid-area: api;
}

.detalhe > footer {
  grid-area: acoes;
  padding-top: var(--esp-4);
  border-top: var(--borda);
}

.detalhe > header h2 {
  margin-bottom: var(--esp-1);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
}

.detalhe > header p {
  margin: 0;
  color: var(--tinta-suave);
}

.detalhe figure {
  margin: 0;
}

.detalhe figure img {
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.detalhe figcaption {
  max-width: 16rem;
  margin-top: var(--esp-3);
  font-size: 0.875rem;
  color: var(--tinta-suave);
}

.detalhe section {
  padding-top: var(--esp-3);
  border-top: 2px solid var(--fundo);
}

.detalhe section h3 {
  margin-bottom: var(--esp-3);
}

/* Dados como ficha: rótulo à esquerda, valor em destaque à direita */
.detalhe dl {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-4);
  margin: 0;
}

.detalhe dt {
  color: var(--tinta-suave);
}

.detalhe dd {
  margin: 0;
  font-weight: 700;
}

.detalhe .selo {
  justify-self: start;
}

.detalhe ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

/* "Voltar" fica à esquerda; editar e excluir, à direita */
.detalhe .acoes .botao--fantasma {
  margin-right: auto;
}


/* ---- Diálogo de confirmação de exclusão ---------------------------------- */

dialog {
  width: min(92vw, 30rem);   /* nunca passa da largura da tela */
  padding: var(--esp-5);
  color: var(--tinta);
  background-color: var(--papel);
  border: var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

dialog::backdrop {
  background-color: rgb(29 27 58 / 0.65);
}

dialog h2 {
  color: var(--perigo-texto);
}

dialog .acoes {
  justify-content: flex-end;
}

/* Movimento que responde a uma ação da pessoa: o diálogo sobe ao abrir */
dialog[open] {
  animation: dialogo-entra 0.18s ease-out;
}

@keyframes dialogo-entra {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
}


/* ==========================================================================
   8. RESPONSIVIDADE (Media Queries, mobile-first)

   Pontos de quebra (em, relativos ao tamanho da fonte do navegador):
     30em  ≈ 480px   celulares grandes
     40em  ≈ 640px   tablets em pé: cards verticais em grade
     48em  ≈ 768px   tablets: navegação ao lado do título, ficha em 2 colunas
     64em  ≈ 1024px  notebooks: resumo ao lado da lista
     90em  ≈ 1440px  telas largas
   ========================================================================== */

/* ---- Telas pequenas (base): botões de ação ocupam a largura toda ---------- */

.formulario .acoes .botao,
dialog .acoes .botao {
  flex: 1 1 100%;
}


/* ---- ≥ 30em: celulares grandes ------------------------------------------- */

@media (min-width: 30em) {
  .formulario .acoes .botao,
  dialog .acoes .botao {
    flex: 0 0 auto;
  }

  /* Campo de busca da API com o botão ao lado */
  .campo--com-botao {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}


/* ---- ≥ 40em: cards verticais em grade, busca em áreas -------------------- */

@media (min-width: 40em) {
  .painel,
  .area-busca,
  .area-resumo,
  .detalhe {
    padding: var(--esp-5);
  }

  /* Busca: campo, filtros e, na última linha, ordenação com os botões */
  .area-busca form {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "busca busca"
      "filtros filtros"
      "ordenacao acoes";
  }

  .area-busca .campo--busca {
    grid-area: busca;
  }

  .area-busca .grupo-filtros {
    grid-area: filtros;
  }

  .area-busca .grupo-ordenacao {
    grid-area: ordenacao;
  }

  .area-busca .acoes {
    grid-area: acoes;
  }

  /* Lista: tantas colunas de 15rem quanto couberem */
  .lista-jogos {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--esp-5);
  }

  /* Card vertical: capa em cima, dados embaixo, botões no rodapé */
  .jogo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
  }

  .jogo img {
    grid-row: auto;
    height: auto;
    aspect-ratio: 3 / 4;
    border-right: 0;
    border-bottom: var(--borda);
  }

  .jogo h3,
  .jogo dl,
  .jogo .acoes {
    grid-column: 1;
  }

  /* O selo de status passa a flutuar sobre a capa; o rótulo "Status" continua
     disponível para leitores de tela */
  .jogo .selo {
    position: absolute;
    top: var(--esp-3);
    left: var(--esp-3);
  }

  .jogo dt:has(+ .selo) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


/* ---- ≥ 48em: navegação ao lado do título, ficha em duas colunas ---------- */

@media (min-width: 48em) {
  body > header nav {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .detalhe {
    grid-template-columns: 16rem minmax(0, 1fr);
    grid-template-areas:
      "topo  topo"
      "capa  dados"
      "capa  obs"
      "capa  api"
      "acoes acoes";
    align-items: start;
  }

  /* Áreas "capa" e "dados" têm alturas diferentes: a capa não estica */
  .detalhe > figure {
    align-self: start;
  }
}


/* ---- ≥ 64em: notebooks (lista à esquerda, resumo fixo à direita) --------- */

@media (min-width: 64em) {
  .pagina-colecao {
    grid-template-columns: minmax(0, 1fr) 20rem;
    grid-template-areas:
      "aviso aviso"
      "busca resumo"
      "lista resumo";
    align-items: start;
  }

  .area-resumo {
    position: sticky;          /* acompanha a rolagem da lista */
    top: var(--esp-4);
  }
}


/* ---- ≥ 90em: telas largas ------------------------------------------------ */

@media (min-width: 90em) {
  :root {
    --largura-max: 84rem;
  }

  body {
    font-size: 1.125rem;
  }
}


/* === FIM === */