/* Lenda do Campinho — © 2026 Educação Gamer (www.educacaogamer.com.br). Todos os direitos reservados.
   Proibida a cópia, redistribuição ou modificação sem autorização por escrito. Lei 9.610/98 e Lei 9.609/98. */
/* ============================================================
   TELA INICIAL v137 (js/inicio.js): arte aparecendo, logo à esquerda,
   painel à direita (avisos, cartão do jogador, blocos de atalho)
   ============================================================ */
#inicio.ini-v2 {
  align-items: center; padding: 14px 18px 18px;
  background:
    linear-gradient(90deg, rgba(24,12,56,.10) 0%, rgba(24,12,56,.05) 40%, rgba(24,12,56,.55) 70%, rgba(24,12,56,.75) 100%),
    linear-gradient(180deg, rgba(24,12,56,.35) 0%, rgba(24,12,56,0) 22%, rgba(24,12,56,0) 60%, rgba(24,12,56,.8) 100%),
    url('../a/titulo.webp') center / cover no-repeat, var(--roxo);
}
#inicio.ini-v2 .inicio-caixa {
  width: min(1200px, 100%); padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); grid-template-areas: "barra barra" "topo menu" "rodape rodape";
  gap: 14px 40px; align-items: center;
}
.ini-v2 .ini-barra { grid-area: barra; min-height: 8px; }
.ini-v2 .ini-barra .portal-barra { margin: 0; }
.ini-v2 .ini-barra .portal-barra .btn { box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.ini-v2 .ini-barra .portal-quem { background: rgba(255,246,224,.92); padding: 5px 12px; border-radius: 999px; border: 2px solid var(--madeira3); color: var(--madeira2); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.ini-v2 .inicio-topo { grid-area: topo; text-align: center; align-self: center; }
.ini-v2 .logo-eg { height: 46px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.ini-v2 .logo-jogo { width: min(620px, 96%) !important; margin: 4px auto 10px !important; filter: drop-shadow(0 8px 14px rgba(20,8,40,.55)); animation: iniFlutua 5s ease-in-out infinite; }
@keyframes iniFlutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.ini-v2 .sub { display: inline-block; max-width: 560px; margin: 0 auto 8px; padding: 8px 16px; border-radius: 14px; background: rgba(24,12,56,.62); color: #fff6e0; font-size: 15.5px; line-height: 1.35; text-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.ini-v2 .aviso-beta { display: inline-block; max-width: 520px; margin: 4px auto 0; font-size: 12px; padding: 4px 12px; border-radius: 999px; border-style: solid; background: rgba(255,232,216,.93); }
.ini-v2 .inicio-menu {
  grid-area: menu; display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px;
  background: linear-gradient(180deg, rgba(250,236,200,.97), rgba(240,218,170,.97)); color: var(--tinta);
  border: 3px solid var(--madeira); border-radius: 18px; box-shadow: 0 0 0 3px var(--madeira2), inset 0 0 0 2px rgba(255,255,255,.35), 0 18px 40px rgba(10,4,30,.55);
}
.ini-v2 .inicio-menu .btn { min-width: 0; }
.ini-v2 .inicio-menu[hidden] { display: none; }
.ini-avisos { display: flex; flex-direction: column; gap: 8px; }
.ini-avisos[hidden] { display: none; }
.ini-avisos .cad-cartao, .ini-avisos .nuvem-caixa { margin: 0; }
/* cartão do jogador */
.ini-cartao { display: flex; flex-direction: column; gap: 8px; background: linear-gradient(135deg, #3a2780, #2b1b5e); color: #fff6e0; border-radius: 14px; padding: 12px; border: 2px solid #1c1140; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.ini-cartao-topo { display: flex; gap: 12px; align-items: center; }
.ini-retrato { position: relative; width: 78px; height: 104px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #6ad86a, #2e8a3a 70%); border: 3px solid var(--amarelo); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.ini-retrato canvas { width: 100%; height: 100%; object-fit: contain; }
.ini-bola { font-size: 44px; animation: iniQuica 1.4s ease-in-out infinite; }
@keyframes iniQuica { 0%, 100% { transform: translateY(6px) rotate(0); } 50% { transform: translateY(-8px) rotate(180deg); } }
.ini-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: Nunito, sans-serif; font-weight: 700; font-size: 13.5px; }
.ini-info small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #cbb8ff; }
.ini-info .ini-nome { font-family: Fredoka, sans-serif; font-size: 22px; line-height: 1.1; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ini-info .ini-nivel { color: var(--amarelo); font-size: 15px; }
.ini-cartao #btnContinuar { font-size: 22px; padding: 12px 18px; width: 100%; animation: iniBrilho 2.6s ease-in-out infinite; }
@keyframes iniBrilho { 0%, 100% { box-shadow: 0 0 0 rgba(255,210,63,0); } 50% { box-shadow: 0 0 18px rgba(255,210,63,.75); } }
.ini-cartao #btnNovo { width: 100%; font-size: 14px; padding: 7px 12px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); }
.ini-cartao:not(.tem-save) #btnNovo { font-size: 21px; padding: 12px 18px; background: linear-gradient(#ffe070, #f0a81a); color: #3b2410; border-color: #9a5a0a; text-shadow: none; animation: iniBrilho 2.6s ease-in-out infinite; }
/* blocos de atalho */
.ini-titulo { margin: 2px 0 -4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--madeira); }
.ini-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ini-tiles #btnHistoria { grid-column: span 2; }
.btn.ini-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 6px 7px; min-height: 76px; border-radius: 12px; background: linear-gradient(180deg, #fffaf0, #f3dfb4); color: var(--tinta); border: 2px solid var(--madeira3); text-shadow: none; box-shadow: 0 3px 0 var(--madeira3); transition: transform .12s, box-shadow .12s; }
.btn.ini-tile:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--madeira3), 0 6px 14px rgba(90,40,10,.25); filter: none; }
.btn.ini-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--madeira3); }
.ini-tile .ini-ic { font-size: 24px; line-height: 1.1; }
.ini-tile b { font-size: 14px; }
.ini-tile small { font-family: Nunito, sans-serif; font-size: 11px; font-weight: 700; color: #8a6a44; line-height: 1.15; text-align: center; }
.ini-v2 .copyright-inicio { grid-area: rodape; color: rgba(255,246,224,.85); text-shadow: 0 1px 2px rgba(0,0,0,.7); margin: 0; }
.ini-v2 .copyright-inicio a { color: var(--amarelo); }
/* criando o jogador: uma coluna, logo menor, formulário no papel */
#inicio.ini-v2.modo-criacao .inicio-caixa { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barra" "topo" "criacao" "rodape"; width: min(960px, 100%); }
.ini-v2.modo-criacao .logo-jogo { width: min(320px, 70%) !important; animation: none; }
.ini-v2.modo-criacao .sub, .ini-v2.modo-criacao .aviso-beta { display: none; }
.ini-v2 .criacao { grid-area: criacao; background: rgba(247,227,181,.97); color: var(--tinta); border: 3px solid var(--madeira); border-radius: 16px; padding: 16px; box-shadow: 0 0 0 3px var(--madeira2), 0 18px 40px rgba(10,4,30,.5); }
/* telas estreitas (celular / janela pequena) */
@media (max-width: 860px) {
  #inicio.ini-v2 { padding: 10px 10px 14px; background: linear-gradient(180deg, rgba(24,12,56,.25), rgba(24,12,56,.15) 30%, rgba(24,12,56,.8)), url('../a/titulo.webp') 30% center / cover no-repeat, var(--roxo); }
  #inicio.ini-v2 .inicio-caixa { grid-template-columns: minmax(0, 1fr); grid-template-areas: "barra" "topo" "menu" "rodape"; gap: 10px; }
  .ini-v2 .logo-jogo { width: min(420px, 88%) !important; margin-bottom: 4px !important; }
  .ini-v2 .sub { font-size: 13.5px; padding: 6px 12px; }
  .ini-v2 .inicio-menu { padding: 12px; }
  .ini-tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .btn.ini-tile { min-height: 68px; padding: 6px 4px; }
  .ini-tile small { display: none; }
  .ini-v2 .logo-eg { height: 30px; }
  .ini-v2 .logo-jogo { width: min(300px, 72%) !important; margin: 0 auto 2px !important; }
  .ini-v2 .sub { font-size: 12.5px; }
  .ini-v2 .aviso-beta { display: none; }
  .ini-v2 .ini-cartao { order: -1; }
  .ini-v2 .ini-barra .portal-barra { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .ini-v2 .ini-barra .portal-barra > * { min-width: 0; flex: 0 1 auto; }
  .ini-v2 .ini-barra .portal-barra .btn, .ini-v2 .ini-barra .portal-quem { font-size: 11.5px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ini-info .ini-nome { font-size: 20px; }
  .ini-cartao #btnContinuar { font-size: 20px; padding: 10px 14px; }
}
/* escolhendo qual save usar: a pergunta ocupa o lugar do Continuar */
.ini-cartao.escolhendo #btnContinuar, .ini-cartao.escolhendo #btnNovo { display: none; }
.ini-cartao #contaEscolha { margin: 0; background: #fff6e0; color: var(--tinta); border: 3px solid var(--amarelo); animation: iniBrilho 2.6s ease-in-out infinite; }
.ini-cartao #contaEscolha .conta-bts { flex-direction: column; align-items: stretch; }
.ini-cartao #contaEscolha .btn { width: 100%; }
.inicio-menu.escolhendo .ini-avisos .nuvem-caixa { display: none; }