:root{
  --laranja:#ff8a3d;
  --azul-ceu:#a5d8ff;
  --verde:#2ecc71;
  --vermelho:#ff7675;
  --roxo:#a29bfe;
  --cinza:#636e72;
}

html,body{ height:100%; }

body{
  font-family:'Fredoka',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100vh;
  height:100svh;
  height:100dvh;
  overflow:hidden;
  position:relative;
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}

/* --- OVERLAYS --- */
.overlay{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  box-sizing:border-box;
  background:rgba(165,216,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:opacity .5s ease;
}

.card-info{
  background:#fff;
  border:8px solid var(--laranja);
  border-radius:40px;
  padding:30px;
  max-width:560px;
  width:min(92vw,560px);
  box-shadow:0 15px 30px rgba(0,0,0,.2);
}

/* --- TOPO --- */
.topo{
  width:100%;
  padding:10px 14px;
  box-sizing:border-box;
  background:rgba(255,255,255,.92);
  z-index:10;
  box-shadow:0 4px 10px rgba(0,0,0,.05);

  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
}

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

.btn-sair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.1s, box-shadow 0.1s;
  padding: 8px 18px;
  outline: none;
  box-sizing: border-box;
  background: var(--vermelho);
  color: #fff;
  box-shadow: 0 4px 0 #d63031;
}
.btn-sair:active {
  transform: translateY(4px);
  box-shadow: 0 0px 0 #d63031;
}

.progresso-container{
  width:min(420px, 100vw - 40px);
  height:12px;
  background:#eee;
  border-radius:10px;
  overflow:hidden;
  border:2px solid #fff;
  justify-self:center;
}
#barra{ width:0%; height:100%; background:var(--verde); transition:.5s; }

.status-direita{
  text-align:right;
  line-height:1.1;
  white-space:nowrap;
  justify-self: end;
}
.recorde-topo {
  font-size:1.3rem; 
  color:var(--roxo); 
  font-weight:800;
}

/* Responsivo Topo */
@media (max-width: 650px) {
  .topo {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    row-gap: 12px;
  }
  .botoes-esquerda {
    grid-column: 1 / 2;
    grid-row: 1;
    justify-self: start;
  }
  .status-direita {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-self: end;
  }
  .progresso-container {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }
}

/* --- PAINEL JOGO --- */
.painel-jogo{
  background:#fff;
  border:8px solid var(--laranja);
  border-radius:30px; 
  width:min(92vw, 620px);
  margin-top:10px; 
  padding:15px; 
  text-align:center;
  box-shadow:0 15px 30px rgba(0,0,0,.1);
  z-index:5;
  box-sizing:border-box;
  position: relative;
}

.feedback-linha{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

#feedback{
  font-weight:700;
  font-size:1.05rem;
  min-height:1.8rem;
  margin:0;
  color:var(--cinza);
  flex:1;
  text-align:left;
}

.btn-repetir-topo{
  flex:0 0 auto;
  border:none;
  background:#fff;
  border-radius:18px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
  box-shadow:0 6px 0 rgba(0,0,0,.08);
  border:2px solid rgba(0,0,0,.06);
  touch-action:manipulation;
  user-select:none;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-repetir-topo:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.08); }

.area-bichos{
  font-size:3rem; 
  line-height:1.05;
  margin:10px 0; 
  min-height:120px; 
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  background:#fffdf0;
  border:4px dashed #ffcc80;
  border-radius:20px;
  padding:10px;
  box-sizing:border-box;
  position: relative; 
}

/* --- BICHOS --- */
.bicho{
  display:inline-block;
  transform:translateZ(0);
  will-change:transform;
}

.bicho.entrada {
  animation: popIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}
@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.area-bichos.celebrar .bicho,
.bicho.dance{
  animation:pulinhoBicho 780ms ease-in-out 0ms 2 !important; 
}
.area-bichos.celebrar .bicho:nth-child(odd){ animation-delay:40ms !important; }
.area-bichos.celebrar .bicho:nth-child(3n){ animation-delay:80ms !important; }
.area-bichos.celebrar .bicho:nth-child(4n){ animation-delay:120ms !important; }

@keyframes pulinhoBicho{
  0%   { transform:translate3d(0,0,0) rotate(0deg) scale(1); }
  18%  { transform:translate3d(0,-18px,0) rotate(-8deg) scale(1.08); }
  36%  { transform:translate3d(0,0,0) rotate(8deg) scale(1.02); }
  54%  { transform:translate3d(0,-12px,0) rotate(-6deg) scale(1.06); }
  72%  { transform:translate3d(0,0,0) rotate(6deg) scale(1.02); }
  100% { transform:translate3d(0,0,0) rotate(0deg) scale(1); }
}

/* --- PARTÍCULAS --- */
.particula-estrela {
  position: absolute;
  font-size: 2rem;
  pointer-events: none;
  z-index: 100;
  animation: explodirEstrela 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes explodirEstrela {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(var(--rot)); opacity: 0; }
}

/* --- TECLADO --- */
.teclado-wrap{
  display:flex;
  flex-direction:column;
  gap:8px; 
  align-items:center;
  margin-top:4px;
}

.teclado-dica{
  font-size:.95rem;
  font-weight:700;
  color:#2d3436;
  opacity:.9;
}

.teclado{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px; 
  width:100%;
}

.btn-num{
  border:none;
  background:#f7f7f7;
  border-radius:15px;
  padding:10px 0; 
  font-size:1.4rem; 
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.12); 
  border:2px solid rgba(0,0,0,.06);
  touch-action:manipulation;
  user-select:none;
  transition:transform .1s ease, background-color .15s ease, box-shadow .1s ease;
}
.btn-num:active{ 
  transform:translateY(4px); 
  box-shadow:0 2px 0 rgba(0,0,0,.12); 
}

.btn-num.selecionado{ background:#eaf7ee; border-color:rgba(46,204,113,.45); }
.btn-num.errado{ background:#ffe9e9; border-color:rgba(255,118,117,.65); color:#c0392b; }
.btn-num.certo{ background:#eaf7ee; border-color:rgba(46,204,113,.75); color:#1e8449; }
.btn-num[data-num="10"]{ font-size:1.25rem; }

.btn-acao{
  width:100%;
  background:var(--verde);
  color:#fff;
  border:none;
  padding:12px 18px; 
  font-size:1.2rem;
  border-radius:50px;
  cursor:pointer;
  font-weight:800;
  box-shadow:0 8px 0 #219a52;
  text-transform:uppercase;
  transition:.1s;
  touch-action:manipulation;
  margin-top:8px; 
}
.btn-acao:active{ transform:translateY(6px); box-shadow:0 2px 0 #219a52; }
.btn-acao:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
}

/* --- STATUS INFERIOR --- */
.status-inferior {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 10px; 
  width: min(92vw, 620px);
  z-index: 5;
}
.caixa-status {
  background: #fff;
  border: 5px solid #fff;
  border-radius: 20px; 
  padding: 8px; 
  font-size: 1rem; 
  font-weight: 700;
  text-align: center;
  flex: 1;
  box-shadow: 0 10px 25px rgba(0,0,0,.1);
}
.caixa-status.pontos { color: var(--laranja); border-color: #ffeaa7; }
.caixa-status.sequencia { color: var(--verde); border-color: #55efc4; }
.caixa-status span { 
  font-size: 1.8rem; 
  display: block; 
  margin-top: 5px; 
  color: var(--cinza);
}

/* --- CONTROLES FIXOS --- */
.hud{
  position:absolute;
  right:max(16px, env(safe-area-inset-right, 0px));
  bottom:max(90px, env(safe-area-inset-bottom, 0px));
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:120;
  transform:translateZ(0);
  will-change:transform;
  /* contain: layout paint; REMOVIDO PARA PARAR DE CORTAR A SOMBRA DO BOTÃO */
  pointer-events:auto;
}

.btn-circular{
  width:56px;height:56px; 
  border-radius:50%;
  border:4px solid #fff;
  cursor:pointer;
  font-size:1.4rem; 
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 0 rgba(0,0,0,.15);
  background:#fff;
  transition:transform .1s ease, box-shadow .1s ease;
  touch-action:manipulation;
  user-select:none;
}
.btn-circular:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.15); }
.btn-som.ativo{ background:var(--verde); color:#fff; border-color:#e8f5e9; }
.btn-musica.ativo{ background:var(--laranja); color:#fff; border-color:#fff0e6; }
.btn-fs{ background:var(--roxo); color:#fff; border-color:#f3f0ff; }


/* ==============================================================
   MEDIA QUERIES DE AJUSTES E RESPONSIVIDADE
============================================================== */

@media (max-width:430px){
  .painel-jogo{ margin-top:10px; padding:15px; }
  .area-bichos{ font-size:2.8rem; min-height:120px; padding:12px; }
  .btn-num{ padding:10px 0; font-size:1.3rem; }
  .btn-circular{ width:50px; height:50px; }
  #feedback{ font-size:1rem; }
  .caixa-status { font-size: .85rem; padding: 8px; }
  .caixa-status span { font-size: 1.5rem; }
  .hud{ bottom:max(70px, env(safe-area-inset-bottom, 0px)); }
}

@media (max-height:700px){
  .painel-jogo{ margin-top:5px; padding:10px; }
  .area-bichos{ min-height:100px; font-size: 2.5rem; margin: 8px 0; }
  .btn-num{ padding: 8px 0; font-size: 1.2rem; }
  .caixa-status span { font-size: 1.4rem; }
}

/* --- AJUSTE PARA TELAS GRANDES (MONITORES) --- */
@media (min-width: 900px) and (min-height: 750px) {
  .painel-jogo, .status-inferior {
    width: min(92vw, 750px); /* Aumenta a caixa do jogo */
    margin-top: 20px;
    padding: 25px;
  }
  .area-bichos {
    font-size: 4rem; /* Bichos bem maiores */
    min-height: 180px; 
    margin: 15px 0;
  }
  .teclado-wrap {
    gap: 12px;
  }
  .teclado {
    gap: 12px;
  }
  .btn-num {
    font-size: 1.8rem; 
    padding: 15px 0;
  }
  .btn-num[data-num="10"]{ font-size:1.5rem; }
  #feedback {
    font-size: 1.25rem;
  }
  .caixa-status span {
    font-size: 2.2rem; 
  }
  .btn-acao {
    padding: 16px 20px;
    font-size: 1.4rem;
    margin-top: 12px;
  }
}