:root{
  --chao: #c0f0ff;        /* chão leve */
  --parede: #ffd4a3;      /* parede clara */
  --jogador: #ffffff;      /* jogador branco */
  --checkpoint: #ffe066;   /* amarelo vibrante */
  --tesouro: #39d98a;      /* verde tesouro */
  --hud-bg: rgba(94, 132, 193, 0.95);
  --texto: #072133;
  --accent: #5acfff;
  --erro: #ff5a5a;
  --sucesso: #8fe3ff;
}

html, body{
  height: 100%;
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg,#eaf9ff,#fffaf6);
}

#game-container{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,10,20,0.5);
  z-index: 9999;
}

.panel{
  width: 720px;
  max-width: 94%;
  background: linear-gradient(180deg,#ffffff,#f8f9ff);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(10,20,40,0.25);
  color: var(--texto);
  border:1px solid rgba(10,20,40,0.04);
}

.panel h1{
  margin:0 0 6px 0;
  font-size: 24px;
}

.panel p{
  margin:6px 0 12px 0;
  color:#415a6a;
}

.panel input[type="text"]{
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #e5eef6;
}

.row{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.btn{
  background: var(--accent);
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  color: #023;
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn:hover{
  transform: scale(1.05);
}

.btn.secondary{
  background: #ffd8a3;
  color: #072133;
}

#hud{
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 1000;
  background: var(--hud-bg);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow:0 8px 18px rgba(10,20,40,0.08);
  font-weight:700;
  color: var(--texto);
}

#hud small{
  display: block;
  font-weight: 600;
  opacity: 0.85;
  font-size: 13px;
}

/* Input de pergunta focado */
#qInput:focus{
  outline: none;
  border: 2px solid var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

#qInput{
    transition: all 0.2s ease;
    max-width: 95%;
}
/* Efeito de shake quando errado */
.shake{
  animation: shake 0.35s;
}

#playerNameInput{
    transition: all 0.2s ease;
    max-width: 95%;
}
/* Esconde os players de áudio */
#bgAudio, #sfxPlim, #congratsAudio {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

@keyframes shake {
  0% { transform: translate(0px,0px);}
  20% { transform: translate(-4px,0px);}
  40% { transform: translate(4px,0px);}
  60% { transform: translate(-4px,0px);}
  80% { transform: translate(4px,0px);}
  100% { transform: translate(0px,0px);}
}

/* Responsividade */
@media (max-width:600px){
  .panel{ width: 92%; padding:14px; }
  .panel h1{ font-size: 20px; }
  #hud{ font-size: 13px; }
  .btn{ padding: 8px 10px; font-size: 14px; }
}