/*
 * Capa da tela inicial — Livros da Bíblia: Jogo da Memória
 * Este arquivo sobrescreve somente o visual da home.
 * O restante do jogo continua usando style.css e livros-cartas.css.
 */

:root{
  --home-blue-top:#2389dc;
  --home-blue-mid:#135da9;
  --home-blue-deep:#102c66;
  --home-blue-bottom:#08142f;
  --home-gold:#f3c65d;
  --home-gold-light:#ffe495;
  --home-panel:#102b63;
}

/* Fundo geral harmonizado com o azul da nova capa. */
body{
  background:
    radial-gradient(circle at 50% -8%, rgba(95,184,255,.95) 0, rgba(35,137,220,.82) 17%, rgba(19,93,169,.82) 34%, transparent 54%),
    linear-gradient(180deg,var(--home-blue-mid) 0,var(--home-blue-deep) 52%,var(--home-blue-bottom) 100%);
  background-attachment:fixed;
}

/* Mantém um título semântico para SEO/leitores de tela, sem duplicar o texto da arte. */
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* O hero deixa de ser creme e passa a funcionar como moldura azul da capa. */
.hero-card{
  width:min(900px,100%);
  max-width:900px;
  margin:10px auto 36px;
  padding:clamp(14px,2.3vw,26px);
  color:#fff;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0,rgba(72,164,236,.30),transparent 48%),
    linear-gradient(180deg,#174d96 0,#102e69 55%,#0b214f 100%);
}

.hero-card.pixel-panel{
  border-color:#173168;
  box-shadow:
    0 0 0 4px var(--home-gold),
    8px 8px 0 rgba(4,10,28,.72);
}

/* A imagem substitui integralmente o SVG + h1 + subtítulo antigos. */
.game-cover-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin:0 auto clamp(16px,2vw,24px);
}

.game-cover{
  display:block;
  width:min(100%,700px);
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  border-radius:8px;
  image-rendering:auto;
  filter:drop-shadow(0 9px 0 rgba(4,15,45,.25));
}

.hero-card .choose{
  margin:0 0 16px;
  color:#fff3c4;
  font-size:clamp(13px,1.6vw,17px);
  line-height:1.4;
  text-shadow:2px 2px 0 rgba(6,17,45,.65);
}

/* Botões mais integrados à paleta da capa. */
.hero-card .difficulty-buttons{
  width:min(100%,800px);
  margin-inline:auto;
}

.hero-card .difficulty-buttons button{
  min-height:64px;
  border-color:#132957;
  box-shadow:0 5px 0 #071b42;
}

.hero-card .difficulty-buttons button:focus-visible{
  outline:3px solid var(--home-gold-light);
  outline-offset:4px;
}

/* A galeria continua escura, mas agora usa o mesmo azul da capa. */
.home-screen .gallery{
  background:linear-gradient(180deg,#133b7d 0,#102b62 100%);
  border-color:#173168;
}

/* Tablets */
@media(max-width:900px){
  .hero-card{
    width:min(760px,100%);
  }

  .game-cover{
    width:min(100%,620px);
  }
}

/* Celulares */
@media(max-width:700px){
  body{
    background:
      radial-gradient(circle at 50% -2%,rgba(73,166,237,.88) 0,rgba(25,105,185,.76) 26%,transparent 47%),
      linear-gradient(180deg,#10579f 0,#102e69 58%,#08142f 100%);
  }

  .screen{
    padding:12px;
  }

  .hero-card{
    margin:4px auto 26px;
    padding:10px 10px 18px;
    border-radius:8px;
  }

  .hero-card.pixel-panel{
    border-width:3px;
    box-shadow:
      0 0 0 3px var(--home-gold),
      5px 5px 0 rgba(4,10,28,.68);
  }

  .game-cover-wrap{
    margin-bottom:14px;
  }

  .game-cover{
    width:100%;
    max-width:520px;
    border-radius:5px;
    filter:drop-shadow(0 6px 0 rgba(4,15,45,.22));
  }

  .hero-card .choose{
    margin-bottom:12px;
    padding-inline:4px;
  }

  .hero-card .difficulty-buttons{
    gap:9px;
  }

  .hero-card .difficulty-buttons button{
    min-height:58px;
    padding:11px 6px;
  }
}

/* Telas muito estreitas: preserva o grid 2x2 sem apertar os textos. */
@media(max-width:390px){
  .screen{
    padding:8px;
  }

  .hero-card{
    padding:8px 8px 15px;
  }

  .hero-card .difficulty-buttons{
    gap:7px;
  }

  .hero-card .difficulty-buttons button{
    min-height:54px;
    font-size:10px;
    padding:9px 4px;
  }

  .hero-card .difficulty-buttons small{
    font-size:9px;
    margin-top:5px;
  }
}


/* Header compacto */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  padding:8px 12px;
  background:rgba(7,20,47,.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:2px solid rgba(243,198,93,.7);
  box-shadow:0 3px 0 rgba(3,10,28,.35);
}

.topbar-inner{
  width:min(1080px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.topbar-home{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 11px;
  color:#fff6d0;
  text-decoration:none;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  border:2px solid #f3c65d;
  border-radius:6px;
  background:linear-gradient(180deg,#194f97 0,#11336d 100%);
  box-shadow:0 3px 0 #071b42;
  transition:transform .12s ease, filter .12s ease;
}

.topbar-home:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.topbar-home:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 #071b42;
}

.topbar-home:focus-visible{
  outline:3px solid #ffe495;
  outline-offset:3px;
}

.topbar-icon{
  font-size:15px;
  line-height:1;
}

.topbar-title{
  color:#dcecff;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  opacity:.9;
}

@media(max-width:700px){
  .topbar{
    padding:6px 8px;
  }

  .topbar-home{
    min-height:32px;
    padding:6px 9px;
    font-size:11px;
  }

  .topbar-title{
    font-size:9px;
    letter-spacing:.05em;
  }
}

@media(max-width:390px){
  .topbar-title{
    display:none;
  }
}