/*

Projeto: Kiva – Kiva Play 
Arquivo: kivaplay theme.css
Versão: v1.0.0 — 2025-11-10
Histórico: v1.0.0: Primeira versão estável do tema do hub de jogos (grid/cards/badges/buttons)
Autor(a): Valdelir da Graça dos Santos Souza — Especialista de Inovação com IA
Observações: Código 100% nativo Kiva; Direitos autorais preservados; Uso licenciado apenas via Kiva.
===========================================================
*/
/* ========== TOKENS ========= */
:root{
  /* Cores base */
  --k-bg: #0b0a10;
  --k-bg-2:#121124;
  --k-card:#151226;
  --k-bd:  #2a2442;
  --k-txt: #f2f2f7;
  --k-muted:#b8b8c7;

  /* Acentos Kiva */
  --k-acc:#7a5cff;          /* roxo Kiva */
  --k-acc-2:#5c3bff;
  --k-ok:#22c55e;
  --k-warn:#ffd166;
  --k-info:#7bdff2;

  /* Efeitos */
  --k-shadow: 0 8px 28px rgba(122, 92, 255, .14);
  --k-ring: 0 0 0 2px rgba(122, 92, 255, .35);

  /* Tipografia & ritmo */
  --k-font: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --k-radius:16px;
  --k-radius-sm:10px;
  --k-gap:16px;
  --k-gap-sm:10px;

  /* Larguras */
  --k-container:1040px;
}

/* ========== BASE ========= */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:linear-gradient(160deg,var(--k-bg),#16162a 40%, #0c0b17);
  color:var(--k-txt);
  font-family:var(--k-font);
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{filter:brightness(1.06)}
button{font:inherit}

/* ========== LAYOUT ========= */
.container{max-width:var(--k-container);margin:0 auto;padding:16px}
.section{padding:16px}
.hero.card{margin:14px 0}

.grid{display:grid;gap:var(--k-gap);grid-template-columns:repeat(1,1fr)}
@media (min-width:860px){ .grid{grid-template-columns:repeat(2,1fr)} }
.grid-3{display:grid;gap:var(--k-gap);grid-template-columns:repeat(1,1fr)}
@media (min-width:1040px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

/* grid dos kits – 3 colunas, todas esticam os cards igualmente */
.grid-kits {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch; /* faz as colunas terem a mesma altura */
}
/* cada card ocupa a altura toda e organiza conteúdo em coluna */
.grid-kits .card {
  display: flex;
  flex-direction: column;
}

/* Garante que o botão fique “colado” na parte de baixo do card */
.grid-kits .card > div:last-child,
.grid-kits .card .card-footer {
  margin-top: auto;
}

/* wrapper interno dos cards que têm <div> dentro */
.grid-kits .card > div {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* área do botão lá embaixo nos cards de Tabuada e Foco */
.grid-kits .card .space-y,
.grid-kits .card .actions,
.grid-kits .card .cta-wrapper {
  margin-top: auto; /* empurra a área do botão para o rodapé do card */
}
/* ========== CARDS ========= */
.card{
  background:var(--k-card);
  border:1px solid var(--k-bd);
  border-radius:var(--k-radius);
  padding:16px;
  box-shadow:var(--k-shadow);
  display:flex; gap:12px; justify-content:space-between; align-items:flex-start;
  min-height:160px;
}
.card .title{margin:0 0 6px;font-weight:800}
.card .muted{color:var(--k-muted)}
.card .actions{display:flex;gap:10px;align-items:center;margin-top:6px}

/* ========== BADGES / CHIPS ========= */
.badge{
  display:inline-block; padding:4px 8px;
  border:1px solid #3a3357; background:#1b1530; color:var(--k-muted);
  border-radius:999px; font-size:.82rem; margin-right:6px;
}
.tag{display:inline-block;padding:2px 8px;border-radius:999px;background:#221b44;color:#cfc9ff;border:1px solid #3c3270}

/* ========== BOTÕES ========= */
.btn{
  border:none; border-radius:12px; padding:10px 14px; cursor:pointer;
  background:#2a2442; color:#fff; transition:transform .08s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(135deg,var(--k-acc),var(--k-acc-2))}
.btn.ghost{background:transparent;border:1px solid #3a3357}
.btn.success{background:linear-gradient(135deg,#22c55e,#16a34a)}
.btn.warn{background:linear-gradient(135deg,#ffd166,#f4b942); color:#000}

/* ========== FORM / INPUTS ========= */
.input, select, textarea{
  width:100%; padding:10px; border-radius:10px;
  border:1px solid #3a3357; background:#0f0c1d; color:#fff;
}
.input:focus, select:focus, textarea:focus{outline:none; box-shadow:var(--k-ring)}

/* ========== BLOCO LIKE “HOW TO” ========= */
.howto{
  background:#151526; border:1px solid #2f2f5f; border-radius:12px; padding:16px;
}


/* ========== NAV/HEADER/FOOTER BÁSICOS ========= */
.header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,var(--k-bg),var(--k-bg-2));
  border-bottom:1px solid var(--k-bd);
}
.header .bar{display:flex;gap:20px;align-items:center;padding:12px 16px;max-width:var(--k-container);margin:0 auto}
.header .brand img{height:40px}
.header .nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.header .nav a{padding:8px 10px;border-radius:10px}
.header .nav a:hover{background:rgba(122,92,255,.22)}
.header .nav a.is-active{background:linear-gradient(135deg,var(--k-acc),var(--k-acc-2));box-shadow:var(--k-shadow)}

.footer{
  margin-top:24px; border-top:1px solid var(--k-bd);
  background:#0b0b13; color:var(--k-muted)
}
.footer .bar{max-width:var(--k-container);margin:0 auto;padding:18px}

/* ========== UTILITÁRIOS ========= */
.center{display:grid;place-items:center}
.muted{color:var(--k-muted)}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.space-y>*+*{margin-top:12px}
.ring{box-shadow:var(--k-ring)}

/* ========== BREAKPOINTS / AJUSTES ========= */
@media (max-width:640px){
  .card{flex-direction:column}
  .header .nav{justify-content:center;margin-left:0}
}
/* Link visível apenas ao usar teclado (TAB) */
.kiva-embed-skip {
  position: absolute;
  top: -100px;         /* Esconde visualmente */
  left: 10px;
  background: #ffffff;
  color: #000000;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  text-decoration: none;
  z-index: 9999;

  /* Transição suave quando aparecer */
  transition: top 0.2s ease-out;
}

/* Quando o usuário navega por teclado e o link recebe foco */
.kiva-embed-skip:focus {
  top: 10px;           /* Aparece suavemente */
  outline: 3px solid #7c4dff;
  outline-offset: 4px;
}
/* 🌙 Card de explicação PWA */
#kivaplay-pwa-info {
  padding: 1.8rem;
  border-radius: 18px;
  background: #1b1036; /* roxo mais claro e vivo */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  margin-bottom: 2rem;
  color: #f5f5f5;
}

/* Título elegante */
#kivaplay-pwa-info h2 {
  margin-top: 0;
  font-size: 1.6rem;
}

/* Lista suave */
#kivaplay-pwa-info ul.pwa-beneficios {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 1.5rem;
}

#kivaplay-pwa-info ul.pwa-beneficios li {
  margin-bottom: .4rem;
  font-size: 1rem;
}

/* Dica final */
#kivaplay-pwa-info .pwa-dica {
  background: rgba(255, 235, 59, 0.08);
  padding: .8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 235, 59, 0.45);
  color: #fff9c4;
  font-size: .95rem;
}

/* Links amarelos */
.kiva-dark a, 
#kivaplay-pwa-info a {
  color: #ffeb3b;
  text-decoration: underline;
}

.kiva-dark a:hover,
#kivaplay-pwa-info a:hover {
  color: #fff9c4;
}
/* Card base */
#kivaplay-pwa-info {
  padding: 1.8rem 2rem;
  border-radius: 18px;
  background: #1b1036;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  margin-bottom: 2rem;
  color: #f5f5f5;
}

/* Grid de 2 colunas: esquerda (texto), direita (lista + dica) */
#kivaplay-pwa-info .pwa-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr);
  gap: 2rem;
  align-items: flex-start;
}

/* Título menos espalhado, mais “compacto” */
#kivaplay-pwa-info h2 {
  margin-top: 0;
  margin-bottom: .75rem;
  font-size: 1.6rem;
}

/* Texto principal */
#kivaplay-pwa-info .pwa-main p {
  margin: 0;
}

/* Lista de benefícios */
#kivaplay-pwa-info ul.pwa-beneficios {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1rem;
}

#kivaplay-pwa-info ul.pwa-beneficios li {
  margin-bottom: .35rem;
  font-size: .98rem;
}

/* Caixinha amarela mais integrada, coladinha na lista */
#kivaplay-pwa-info .pwa-dica {
  background: rgba(255, 235, 59, 0.08);
  padding: .75rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 235, 59, 0.45);
  color: #fff9c4;
  font-size: .95rem;
  margin: 0;
}

/* Responsivo: empilha no mobile */
@media (max-width: 900px) {
  #kivaplay-pwa-info .pwa-layout {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  #kivaplay-pwa-info {
    padding: 1.4rem 1.2rem;
  }
}