@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Quicksand:wght@500;600;700&display=swap');

:root{
  --roxo:#8b5fbf; --roxo-escuro:#5b3a8e; --rosa:#ff8fc7; --dourado:#ffd166;
  --verde:#7bd389; --azul:#7fc8f8; --creme:#fff7ec; --texto:#4a3560;
  --sombra: 0 10px 30px rgba(91,58,142,.18);
}
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh; font-family:'Quicksand',sans-serif; color:var(--texto);
  background:
    radial-gradient(circle at 15% 20%, rgba(255,209,102,.35), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,143,199,.35), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(123,200,248,.3), transparent 45%),
    linear-gradient(160deg, #efe3ff 0%, #ffe9f6 50%, #fff3e0 100%);
  background-attachment: fixed;
  overflow-x:hidden;
}
h1,h2,h3,.titulo-fonte{ font-family:'Baloo 2', sans-serif; }

/* --- brilhos flutuantes de fundo --- */
.brilhos{ position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.brilho{
  position:absolute; bottom:-40px; font-size:22px; opacity:.75;
  animation: subir linear infinite;
}
@keyframes subir{
  0%{ transform: translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:.8; }
  90%{ opacity:.6; }
  100%{ transform: translateY(-110vh) rotate(360deg); opacity:0; }
}

.envolucro{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

/* --- topo --- */
header.topo{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(16px,4vw,48px); gap:12px;
}
.marca{ display:flex; align-items:center; gap:12px; }
.marca .emoji{ font-size:34px; filter:drop-shadow(0 4px 6px rgba(91,58,142,.25)); }
.marca h1{ margin:0; font-size:clamp(20px,3vw,28px); color:var(--roxo-escuro); }
.marca span{ display:block; font-size:13px; font-weight:600; color:var(--rosa); }

.botao-sair{
  border:none; background:#fff; color:var(--roxo-escuro); font-weight:700;
  padding:10px 18px; border-radius:999px; cursor:pointer; box-shadow:var(--sombra);
  font-family:'Quicksand',sans-serif;
}
.botao-sair:hover{ transform:translateY(-1px); }

main{ flex:1; padding:8px clamp(16px,4vw,48px) 60px; }

/* --- portal de entrada (senha) --- */
.portal{
  min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center;
}
.portal-caixa{
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border-radius:32px; padding:44px clamp(24px,6vw,56px); max-width:420px;
  box-shadow:var(--sombra); border:3px solid #fff;
}
.portal-caixa .emoji-grande{ font-size:64px; display:block; margin-bottom:8px; }
.portal-caixa h2{ margin:0 0 6px; color:var(--roxo-escuro); font-size:26px; }
.portal-caixa p{ margin:0 0 22px; font-size:15px; color:#7a6795; }
.portal-caixa input{
  width:100%; padding:14px 18px; border-radius:999px; border:2px solid #eadcff;
  font-size:16px; font-family:'Quicksand',sans-serif; text-align:center; outline:none;
  margin-bottom:14px; background:#fbf7ff;
}
.portal-caixa input:focus{ border-color:var(--roxo); }
.botao-magico{
  width:100%; border:none; border-radius:999px; padding:14px 18px; cursor:pointer;
  font-family:'Baloo 2',sans-serif; font-weight:700; font-size:17px; color:#fff;
  background:linear-gradient(135deg, var(--roxo), var(--rosa));
  box-shadow:0 8px 20px rgba(139,95,191,.4); transition:transform .15s;
}
.botao-magico:hover{ transform:translateY(-2px) scale(1.01); }
.erro-senha{ color:#c0447a; font-weight:700; font-size:13px; margin-top:10px; min-height:16px; }

/* --- hub de jogos --- */
.faixa-boasvindas{ text-align:center; margin:6px 0 34px; }
.faixa-boasvindas h2{ font-size:clamp(22px,3.4vw,32px); color:var(--roxo-escuro); margin:0 0 6px; }
.faixa-boasvindas p{ margin:0; color:#8072a0; font-size:15px; }

.grade-jogos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:22px;
  max-width:1180px; margin:0 auto;
}
.carta-jogo{
  position:relative; border-radius:26px; padding:26px 22px 22px; cursor:pointer;
  background:#fff; box-shadow:var(--sombra); border:3px solid #fff;
  transition:transform .18s, box-shadow .18s; overflow:hidden; text-align:left;
  display:block; text-decoration:none;
}
.carta-jogo::before{
  content:''; position:absolute; top:-30px; right:-30px; width:110px; height:110px;
  border-radius:50%; opacity:.35; background:var(--tom, var(--roxo));
}
.carta-jogo:hover{ transform:translateY(-6px) rotate(-.4deg); box-shadow:0 16px 34px rgba(91,58,142,.28); }
.carta-jogo .emoji{ font-size:44px; display:block; margin-bottom:10px; }
.carta-jogo h3{ margin:0 0 6px; font-size:19px; color:var(--roxo-escuro); position:relative; }
.carta-jogo p{ margin:0; font-size:13.5px; color:#8072a0; min-height:36px; position:relative; }
.carta-jogo .jogar{
  margin-top:14px; display:inline-flex; align-items:center; gap:6px;
  font-weight:700; font-size:13.5px; color:var(--roxo); position:relative;
}

.cor-roxo{ --tom:#c9aeff; } .cor-rosa{ --tom:#ffbede; } .cor-dourado{ --tom:#ffe19a; }
.cor-verde{ --tom:#b6f0c1; } .cor-azul{ --tom:#bfe6ff; }

/* estado vazio */
.vazio{ text-align:center; max-width:460px; margin:40px auto; }
.vazio .emoji-grande{ font-size:70px; display:block; margin-bottom:14px; }
.vazio h2{ color:var(--roxo-escuro); margin:0 0 8px; }
.vazio p{ color:#8072a0; margin:0; }

.rodape{ text-align:center; padding:18px; font-size:12px; color:#a695c2; }

@media (max-width:520px){
  .grade-jogos{ grid-template-columns:1fr 1fr; gap:14px; }
  .carta-jogo{ padding:18px 14px 16px; }
  .carta-jogo .emoji{ font-size:34px; }
}

.oculto{ display:none !important; }