@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700;800&display=swap');

:root{
  --azul-ceu:#60b6ea;
  --laranja:#ff9800;
  --btn-vermelho:#ff7675;
  --btn-verde:#2ecc71;
  --btn-roxo:#a29bfe;
  --azul-tile:#4834d4;
  --cinza:#2d3436;
  --branco:rgba(255,255,255,0.95);
  --sombra:rgba(0,0,0,0.15);
}

*{ box-sizing:border-box; }
body{
  font-family:'Fredoka',sans-serif;
  background: linear-gradient(180deg, var(--azul-ceu) 0%, #87CEEB 55%, #cfefff 100%);
  margin:0;
  overflow-x:hidden;
  overflow-y:auto;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  user-select:none;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 92px;
}


/* Fundo Nuvens */
.nuvens-container{
  position:fixed; inset:0; overflow:hidden; z-index:1; pointer-events:none; filter: drop-shadow(0 8px 18px rgba(0,0,0,0.1));
}
.nuvem{
  position:absolute; background:white; width:140px; height:44px; border-radius:60px; opacity:.9; animation:moverNuvens linear infinite;
}
.nuvem::before, .nuvem::after{ content:""; position:absolute; background:white; border-radius:50%; }
.nuvem::before{ width:66px; height:66px; top:-28px; left:18px; opacity:1; }
.nuvem::after{ width:52px; height:52px; top:-20px; left:62px; opacity:1; }
@keyframes moverNuvens{ from{ left:-260px; } to{ left:110%; } }

/* Cabeçalho Reorganizado com Grid para centralizar perfeitamente */
header {
  position: sticky; top: 0; background: var(--branco); width: 100%; padding: 12px 18px; 
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; z-index: 60; 
  box-shadow: 0 4px 16px var(--sombra); gap: 10px;
}

.botoes-topo-esquerda {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-self: start;
}

.btn-sair{
  background: var(--btn-vermelho); color:white; text-decoration:none; padding:10px 18px; border-radius:50px; font-weight:800; box-shadow:0 5px 0 #d63031; white-space:nowrap; transition: transform 0.1s, box-shadow 0.1s;
}
.btn-sair:active { transform: translateY(5px); box-shadow: 0 0 0 #d63031; }

.btn-topo {
  background: #f4f7ff; color: var(--azul-tile); border: 2px solid rgba(72, 52, 212,.2); padding: 8px 12px; border-radius: 50px; font-weight: 700; font-family: 'Fredoka', sans-serif; cursor: pointer; transition: all 0.2s; white-space: nowrap; box-shadow: 0 3px 0 rgba(72, 52, 212,.1);
}
.btn-topo:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(72, 52, 212,.1); }

/* Progresso 100% Centralizado */
.status-meio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; justify-self: center; width: 100%;
}
.progresso-texto { font-weight: 800; color: var(--azul-tile); font-size: 1.1rem; }
.barra-fundo {
  width: 100%; min-width: 150px; max-width: 200px; height: 14px; background: #dfe4ea; border-radius: 10px; overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); display: none; margin: 0 auto;
}
.barra-preenchimento {
  height: 100%; background: var(--btn-verde); width: 0%; transition: width 0.4s ease; border-radius: 10px;
}

.status-topo {
  text-align: right; white-space: nowrap; justify-self: end; display: flex; justify-content: flex-end;
}
.status-topo .rank{ color: #e67e22; font-weight: 800; font-size: 1.2rem; display: flex; flex-direction: column; line-height: 1.1;}
.status-topo .rank .valor{ font-size: 1.8rem; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.1)); }

.seq-pop{ animation: seqPop .4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes seqPop{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.3) rotate(5deg); color: #2ecc71; }
  100%{ transform: scale(1); }
}

.container-jogo{
  background:white; margin-top:14px; margin-bottom: 15px; padding:20px; border-radius:30px; width: min(920px, 92%); text-align:center; color:#333; box-shadow:0 12px 0 rgba(0,0,0,0.08); z-index:10; touch-action: pan-y; display: flex; flex-direction: column; flex-shrink: 0;
}

.topo-ajuda{
  display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:12px; color:#3a3a3a; font-weight:700; font-size:1rem;
}
.chip-ajuda{ background:#f4f7ff; border:2px solid rgba(72, 52, 212,.2); padding:8px 14px; border-radius:999px; display:none; }
.chip-ajuda strong{ color: var(--azul-tile); }

.grade-palavras{ display:flex; flex-direction:column; gap:10px; }
.linha-palavra{
  display:flex; align-items:center; gap:12px; background:#f8f9fa; padding:10px 12px; border-radius:22px; border:3px solid #eee; transition: all .2s ease;
}
.linha-palavra:has(.slot.pronto){ border-color: rgba(255,152,0,.4); box-shadow: 0 8px 15px rgba(255,152,0,.15); }
.linha-lendo{ background:#fff9c4 !important; border-color: var(--laranja) !important; transform: scale(1.02); }

.emoji-dica{
  font-size:36px; min-width:60px; height:60px; display:flex; justify-content:center; align-items:center; background:white; border-radius:18px; border:3px solid var(--azul-tile); box-shadow: 0 4px 0 rgba(72, 52, 212, 0.2);
}

.btn-ouvir{
  width:46px; height:46px; border-radius:14px; border:none; background:#ffffff; cursor:pointer; font-size:1.3rem; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 0 rgba(72, 52, 212, 0.2); transition: transform .1s, box-shadow .1s; flex: 0 0 auto;
}
.btn-ouvir:active{ transform: translateY(5px); box-shadow: 0 0 0 rgba(72, 52, 212, 0.2); }

.slots-container{ display:flex; gap:8px; flex-wrap:wrap; flex: 1; justify-content:flex-start; min-width: 0; }

.slot{
  width:75px; height:60px; background:#f1f2f6; border:3px dashed #bdc3c7; border-radius:14px; display:flex; justify-content:center; align-items:center; padding:2px; transition: all .2s ease;
}
.slot.hover{ border-color: var(--azul-tile); background:#eef0ff; transform: scale(1.05); }
.slot.pronto{ border-color: transparent; background:transparent; }

.estoque-silabas{
  margin-top:16px; background:#f1f2f6; padding:16px; border-radius:24px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; min-height:85px; border: 3px solid #dfe4ea;
}

.silaba-card{
  width:75px; height:60px; background: var(--azul-tile); color:white; font-size:1.3rem; font-weight:800; display:flex; justify-content:center; align-items:center; border-radius:14px; cursor:grab; box-shadow:0 6px 0 #30238e; border:2px solid rgba(255,255,255,0.3); transition: transform .1s, filter .1s, box-shadow .1s; touch-action: manipulation;
}
.silaba-card:active{ transform: translateY(4px); box-shadow:0 2px 0 #30238e; }
.silaba-card.selecionado{
  outline: 4px solid var(--laranja); outline-offset: 2px; filter: brightness(1.1); transform: translateY(-5px) scale(1.05); box-shadow: 0 12px 20px rgba(255,152,0,.3), 0 6px 0 #30238e;
}
.correto{ background: var(--btn-verde) !important; box-shadow: 0 6px 0 #1e8449 !important; cursor: default !important; filter: none !important; outline: none !important; }

.tremidinha-erro { animation: shakeErro 0.4s ease-in-out; background: var(--btn-vermelho) !important; box-shadow: 0 6px 0 #c0392b !important;}
@keyframes shakeErro {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px) rotate(-3deg); }
  40%, 80% { transform: translateX(6px) rotate(3deg); }
}

.animar-pulo{ animation: bounceCard .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes bounceCard{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-20px) scale(1.1); } }

.btn-conferir{
  background: #cfcfcf; color:white; border:none; padding:16px; font-size:1.4rem; font-weight:800; border-radius:22px; cursor:pointer; margin-top:16px; box-shadow:0 8px 0 #a0a0a0; font-family:'Fredoka',sans-serif; width:100%; transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-conferir.btn-pronto { background: var(--btn-verde); box-shadow: 0 8px 0 #27ae60; animation: pulseAlert 1.5s infinite; }
.btn-conferir.btn-pronto:active{ transform: translateY(6px); box-shadow:0 2px 0 #27ae60; }

@keyframes pulseAlert {
  0% { box-shadow: 0 8px 0 #27ae60, 0 0 0 0 rgba(46, 204, 113, 0.7); }
  70% { box-shadow: 0 8px 0 #27ae60, 0 0 0 15px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 8px 0 #27ae60, 0 0 0 0 rgba(46, 204, 113, 0); }
}

#feedback{ margin-top:10px; font-weight:800; font-size:1.2rem; min-height:1.4em; }

.rodape-status {
  display: flex; justify-content: space-around; background: white; margin: 0 auto 20px auto; padding: 15px; border-radius: 20px; font-weight: 700; font-size: 1.1rem; color: #444; flex-wrap: wrap; gap: 10px; width: min(920px, 92%); box-shadow:0 8px 0 rgba(0,0,0,0.06); z-index: 10; flex-shrink: 0;
}
.rodape-status span b { font-size: 1.5rem; color: var(--laranja); filter: drop-shadow(0 2px 0 rgba(0,0,0,0.1)); }
.rodape-status .verde b { color: var(--btn-verde); }

.overlay{ position:fixed; inset:0; background: rgba(30,39,46,.92); backdrop-filter: blur(10px); display:flex; justify-content:center; align-items:center; z-index:2000; padding: 18px; }
.menu-caixa{ background:white; padding:30px; border-radius:38px; border:8px solid var(--laranja); width: min(550px, 92vw); text-align:center; box-shadow: 0 20px 50px rgba(0,0,0,0.3); max-height: calc(100dvh - 40px); overflow:auto; }

.titulo-menu { color: var(--laranja); margin:0 0 15px 0; font-size: 2.2rem; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.1)); }

.secao-opcoes { margin-bottom: 15px; text-align: left; background: #f4f7ff; padding: 15px; border-radius: 20px; border: 2px solid rgba(72, 52, 212,.1); }
.secao-opcoes p { margin: 0 0 10px 0; font-weight: 800; color: var(--azul-tile); font-size: 1.1rem; text-align: center;}

.grid-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-opcao {
  background: white; border: 3px solid #dfe4ea; padding: 12px; border-radius: 16px; font-weight: 700; font-size: 1rem; color: #555; cursor: pointer; transition: all 0.2s; font-family:'Fredoka',sans-serif;
}
.btn-opcao.ativo { background: var(--btn-roxo); color: white; border-color: #887df5; box-shadow: 0 4px 0 #887df5; transform: translateY(-2px); }

/* Modificador para dificuldade concluída */
.btn-opcao.concluido { background: var(--btn-verde); color: white; border-color: #27ae60; box-shadow: 0 4px 0 #27ae60; }
.btn-opcao.concluido::after { content: " ✔️"; font-size: 1rem; }

.btn-grande{ background: var(--btn-verde); color:white; border:none; padding:16px; border-radius:24px; font-size:1.6rem; font-weight:900; cursor:pointer; box-shadow:0 8px 0 #27ae60; width:100%; font-family:'Fredoka',sans-serif; transition: transform 0.1s, box-shadow 0.1s; margin-top: 5px; }
.btn-grande:active { transform: translateY(6px); box-shadow: 0 2px 0 #27ae60; }

.btn-sair-menu { display: inline-block; margin-top: 15px; color: var(--btn-vermelho); font-weight: 700; text-decoration: none; font-size: 1.1rem; }


.controles-fixos{ position:fixed; bottom: 20px; right: 20px; display:flex; flex-direction:column; gap:12px; z-index:110; }
.btn-circular{ width:60px; height:60px; border-radius:50%; border:4px solid white; background:white; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow: 0 10px 20px rgba(0,0,0,0.2); transition: transform 0.1s; }
.btn-circular:active { transform: scale(0.9); }
.btn-circular.ativo{ background: var(--btn-verde) !important; color:white; border-color:var(--btn-verde); }

#fx-layer{ position: fixed; inset: 0; pointer-events:none; z-index: 150; overflow:hidden; }
.confetti{ position:absolute; width:12px; height:16px; border-radius:4px; opacity: 1; animation: confettiFall 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes confettiFall{ 0%{ transform: translate3d(var(--x0), var(--y0), 0) rotate(0deg); opacity:1; } 100%{ transform: translate3d(var(--x1), var(--y1), 0) rotate(720deg); opacity:0; } }

@media (max-width: 600px){
  header{ display: flex; flex-direction: column; padding:10px; justify-content: center; align-items: center; }
  .botoes-topo-esquerda { justify-content: center; width: 100%; order: 1; margin-bottom: 5px;}
  .status-topo { width: 100%; text-align: center; order: 2; margin-bottom: 5px; justify-content: center;}
  .status-meio { width: 100%; order: 3; }
  
  .btn-sair, .btn-topo { padding:8px 12px; font-size: 0.9rem; }
  .status-topo .rank .valor{ font-size: 1.4rem; }
  .container-jogo{ padding: 15px; width: 95%; border-radius: 26px; margin-bottom: 10px; }
  .linha-palavra{ gap:10px; padding:8px; border-radius:20px; }
  .emoji-dica{ min-width:50px; height:50px; font-size:28px; }
  .btn-ouvir{ width:40px; height:40px; font-size: 1.1rem;}
  .slot, .silaba-card{ width:60px; height:50px; border-radius:12px; }
  .silaba-card{ font-size: 1.2rem; }
  .btn-conferir{ font-size: 1.3rem; padding: 14px;}
  .rodape-status { font-size: 0.95rem; flex-direction: column; align-items: center; padding: 10px; margin-bottom: 15px;}
}

@media (max-height: 700px) {
  .container-jogo { padding: 10px 15px; margin-top: 8px; margin-bottom: 10px; }
  .grade-palavras { gap: 6px; }
  .linha-palavra { padding: 6px 10px; gap: 8px; border-radius: 16px; }
  .emoji-dica { min-width: 45px; height: 45px; font-size: 26px; border-radius: 12px; }
  .btn-ouvir { width: 38px; height: 38px; font-size: 1rem; border-radius: 10px; }
  .slot { width: 55px; height: 50px; border-radius: 10px; }
  .estoque-silabas { margin-top: 10px; padding: 10px; min-height: 65px; gap: 6px; border-radius: 16px; }
  .silaba-card { width: 55px; height: 50px; font-size: 1.1rem; border-radius: 10px; }
  .btn-conferir { padding: 10px; font-size: 1.2rem; margin-top: 10px; border-radius: 16px; }
  .rodape-status { padding: 10px; margin-bottom: 10px; font-size: 1rem; border-radius: 16px; }
  .rodape-status span b { font-size: 1.2rem; }
  header { padding: 8px 15px; }
  .status-topo .rank .valor { font-size: 1.4rem; }
}