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

:root {
  --azul-ceu: #87CEEB;
  --laranja: #ff9800;
  --btn-vermelho: #ff7675;
  --btn-verde: #2ecc71;
  --azul-tile: #6c5ce7;
  --sombra-btn: #bdc3c7;
}

* { box-sizing: border-box; }

body {
  font-family: 'Fredoka', sans-serif;
  margin: 0;
  height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-height: 680px) {
  body { overflow-y: auto; }
}

.blur-ativo #area-principal { filter: blur(15px); pointer-events: none; }


.nuvens-container {
  position: absolute; width: 100%; height: 100%; overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.pop-in { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pop-in-delay { opacity: 0; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

header {
  position: fixed;
  top: 0;
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.header-botoes { display: flex; gap: 10px; }

.btn-header {
  cursor: pointer; padding: 10px 20px; border-radius: 50px; border: none;
  background: var(--btn-vermelho); color: white; font-weight: bold;
  font-family: 'Fredoka'; font-size: 0.9rem; box-shadow: 0 4px 0 #c0392b;
  transition: transform 0.08s, box-shadow 0.08s; user-select: none;
}
.btn-header:active { transform: translateY(4px); box-shadow: none; }
.btn-sobre-header { background: var(--laranja); box-shadow: 0 4px 0 #e67e22; }
.btn-tema-header { background: var(--azul-tile); box-shadow: 0 4px 0 #4834d4; }

.record-header {
  font-size: 1.1rem; color: #6c5ce7; font-weight: bold; background: #eef2ff;
  padding: 6px 14px; border-radius: 20px; border: 2px dashed rgba(108,92,231,0.55);
}

.game-card {
  background: rgba(255, 255, 255, 0.92); padding: 25px; border-radius: 30px;
  box-shadow: 0 12px 0 rgba(0,0,0,0.12); text-align: center; z-index: 10;
  margin: 18px 0 10px 0; width: min(92vw, 560px); position: relative; overflow: hidden;
}

.titulo-baloes {
  font-size: 1.4rem; color: var(--laranja); margin: 0 0 10px 0;
  text-transform: uppercase; letter-spacing: 1px; animation: pulseTitle 2s infinite ease-in-out;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}
@keyframes pulseTitle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

.area-baloes {
  height: 120px; display: flex; justify-content: center; align-items: flex-end;
  gap: 12px; margin-bottom: 10px;
}
.balao {
  width: 40px; height: 50px; border-radius: 50%; position: relative;
  box-shadow: inset -3px -3px 8px rgba(0,0,0,0.2); animation: flutuar 3s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.balao::after {
  content: ''; position: absolute; bottom: -18px; left: 48%;
  width: 1px; height: 18px; background: #666; opacity: 0.6;
}
@keyframes flutuar { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-15px) rotate(1deg); } }
.fugiu { transform: translateY(-800px) rotate(45deg) !important; opacity: 0; transition: 1.1s ease-in; }

.dica-box {
  background: #eef2ff; padding: 10px 18px; border-radius: 18px; display: inline-block;
  font-weight: bold; color: #2d3436; border: 2px dashed rgba(108,92,231,0.55);
}

.btn-revelar {
  display: none;
  background: #f1c40f; color: #d35400; border: none; padding: 10px 18px;
  border-radius: 18px; font-weight: bold; font-size: 0.95rem; cursor: pointer;
  font-family: 'Fredoka'; box-shadow: 0 4px 0 #f39c12;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-revelar:active { transform: translateY(4px); box-shadow: none; }

#mensagem { margin-top: 0px; min-height: 1.2em; font-weight: bold; color: #555; }

#palavra-display {
  font-size: 3rem; margin: 16px 0 8px 0; font-weight: bold; color: #333;
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2;
}
.letra-slot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 48px; border-bottom: 4px solid #333; text-align: center; border-radius: 10px;
}
.letra-slot.acertou {
  border-bottom: none; color: var(--btn-verde); background: rgba(46,204,113,0.10);
  box-shadow: inset 0 0 0 2px rgba(46,204,113,0.25);
}

.teclado {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px;
  margin-top: 14px; position: relative; z-index: 2;
}
.teclado button {
  height: 48px; border: none; border-radius: 12px; background: white;
  font-family: 'Fredoka'; font-weight: bold; font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 6px 0 var(--sombra-btn); transition: transform 0.1s, box-shadow 0.1s, background 0.15s;
  color: #444; user-select: none;
}
.teclado button:active { transform: translateY(6px); box-shadow: 0 0 0 transparent; }
.teclado button:disabled { cursor: default; opacity: 0.85; }
.teclado button.certo { background: var(--btn-verde) !important; color: white; box-shadow: 0 6px 0 #27ae60; }
.teclado button.errado { background: var(--btn-vermelho) !important; color: white; box-shadow: 0 6px 0 #c0392b; opacity: 0.5; }

.placar-inferior {
  display: flex; flex-direction: row; justify-content: center; gap: 15px;
  margin-top: 5px; width: min(92vw, 560px); position: relative; z-index: 2;
}
.box-placar {
  background: white; padding: 12px; border-radius: 18px; font-weight: bold;
  color: #2d3436; box-shadow: 0 6px 0 rgba(0,0,0,0.1); flex: 1; text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.box-placar span:first-child { font-size: 0.85rem; color: #7f8c8d; margin-bottom: 2px; text-transform: uppercase; }
.box-placar span:last-child { font-size: 1.8rem; }
.box-acertos { background: #fff3e0; border: 2px dashed #f39c12; box-shadow: 0 4px 0 #e67e22; }
.box-acertos span:last-child { color: #e67e22; }
.box-pontos { background: #eef2ff; border: 2px dashed #6c5ce7; box-shadow: 0 4px 0 #4834d4; }
.box-pontos span:last-child { color: #6c5ce7; }

.overlay {
  position: fixed; inset: 0; background: rgba(44, 62, 80, 0.9);
  backdrop-filter: blur(10px); display: none; flex-direction: column;
  align-items: center; justify-content: center; z-index: 2000; padding: 18px;
}
.menu-caixa {
  background: white; padding: 36px; border-radius: 35px; border: 8px solid var(--laranja);
  width: min(92vw, 450px); text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  max-height: 90vh; overflow-y: auto;
}
.caixa-larga { width: min(92vw, 800px); }

.btn-grande {
  width: 100%; padding: 18px; font-size: 1.45rem; border: none; border-radius: 20px;
  background: var(--btn-verde); color: white; font-weight: bold; font-family: 'Fredoka';
  cursor: pointer; box-shadow: 0 6px 0 #27ae60; margin-top: 18px;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn-grande:active { transform: translateY(6px); box-shadow: none; }

.btn-tema {
  background: #74b9ff; box-shadow: 0 5px 0 #0984e3; padding: 12px; border-radius: 15px;
  color: white; font-weight: bold; border: none; cursor: pointer; font-size: 1rem;
  font-family: 'Fredoka'; transition: transform 0.1s; display: flex; align-items: center;
  justify-content: center; gap: 6px;
}
.btn-tema:active { transform: translateY(5px); box-shadow: none; }

/* =========================================
   NOVOS BOTÕES FIXOS (VISUAL IDÊNTICO À IMAGEM)
   ========================================= */
.controles-fixos {
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
  z-index: 2100;
}

.btn-circular {
  width: 65px; 
  height: 65px; 
  border-radius: 50%; 
  border: 4px solid white; /* Borda branca grossa */
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 6px 15px rgba(0,0,0,0.15); /* Sombra suave 3D */
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s; 
  color: white;
}

.btn-circular:active { 
  transform: translateY(3px); 
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
}

/* Ajuste dos SVGs para ficarem sólidos e brancos */
.btn-circular svg { 
  width: 28px; 
  height: 28px; 
  fill: currentColor; 
  stroke: none; 
}

/* Cores de Fundo Específicas (Tela Cheia = Roxo, Música = Laranja, Voz = Verde) */
#btn-fs { background: #a29bfe; }
#btn-musica.ativo { background: #ff9800; }
#btn-voz.ativo { background: #2ecc71; }

/* Cores quando desativados (Mudo) */
#btn-musica:not(.ativo), #btn-voz:not(.ativo) {
  background: #bdc3c7;
  color: #7f8c8d;
}

#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1500; }

.confetti {
  position: absolute; width: 10px; height: 14px; border-radius: 3px; opacity: 0.95;
  animation: confettiFall var(--dur) linear forwards;
}
@keyframes confettiFall { to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); opacity: 0; } }

@media (max-width: 480px) {
  .game-card { padding: 18px; } #palavra-display { font-size: 2.2rem; }
  .letra-slot { min-width: 30px; height: 40px; } .teclado { grid-template-columns: repeat(7, 1fr); }
  .box-placar span:last-child { font-size: 1.4rem; } header { padding: 10px; }
  .btn-header { padding: 8px 14px; font-size: 0.8rem; } .record-header { font-size: 0.9rem; padding: 5px 10px; }
  .btn-circular { width: 55px; height: 55px; border-width: 3px; }
  .btn-circular svg { width: 22px; height: 22px; }
  .placar-inferior { z-index: 2500; }
}

@media (max-height: 700px) {
  #area-principal { margin-top: 50px; }
  .game-card { padding: 12px; margin: 10px 0 5px 0; }
  .titulo-baloes { font-size: 1.1rem; margin-bottom: 5px; }
  .area-baloes { height: 90px; }
  .balao { width: 30px; height: 40px; }
  #palavra-display { font-size: 2rem; margin: 5px 0; }
  .letra-slot { min-width: 25px; height: 35px; }
  .teclado button { height: 36px; font-size: 1rem; }
  .dica-box { padding: 5px 10px; font-size: 0.9rem; }
  .placar-inferior { margin-top: 5px; z-index: 2500; }
  .box-placar { padding: 8px; }
  .box-placar span:last-child { font-size: 1.4rem; }
}

@media (max-height: 600px) {
  #area-principal { margin-top: 40px; }
  .game-card { padding: 8px; margin: 5px 0; }
  .titulo-baloes { font-size: 1rem; margin-bottom: 2px; }
  .area-baloes { height: 70px; margin-bottom: 5px; }
  .balao { width: 24px; height: 30px; }
  #palavra-display { font-size: 1.5rem; margin: 2px 0; }
  .letra-slot { min-width: 20px; height: 28px; border-bottom-width: 2px; }
  .teclado { gap: 4px; }
  .teclado button { height: 30px; font-size: 0.9rem; border-radius: 8px; box-shadow: 0 4px 0 var(--sombra-btn); }
  .teclado button:active { transform: translateY(4px); box-shadow: none; }
  .placar-inferior { gap: 10px; }
  .box-placar { padding: 5px; }
  .box-placar span:last-child { font-size: 1.2rem; }
  .controles-fixos { bottom: 10px; right: 10px; transform: scale(0.8); transform-origin: bottom right; }
}