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

:root{
  --azul-ceu:#87CEEB;
  --azul-tile:#2f80ed;
  --laranja:#ff9800;
  --verde:#27ae60;
  --vermelho:#e74c3c;
  --roxo: #9b59b6;
  --cinza:#1f2937;
  --card:#ffffff;
  --shadow: 0 18px 50px rgba(0,0,0,.18);
  --radius: 28px;
  --app-max: 900px;
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin:0;
  font-family:'Fredoka', system-ui, sans-serif;
  color:#222;
  overflow-x:hidden;
  min-height: 100dvh;
  touch-action: manipulation;
}


#area-principal{ width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10; min-height: 100dvh; }

header {
  background: rgba(255, 255, 255, 0.95); width: 100%;
  padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) 12px calc(12px + var(--safe-left));
  display: flex; justify-content: space-between; align-items: center; z-index: 1000;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); position: sticky; top: 0;
}

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

.btn-header, .btn-modo, .btn-verificar, .tk, .tk2 {
  border: none; border-bottom: 4px solid rgba(0,0,0,0.25);
  transition: transform 0.1s ease, border-bottom 0.1s ease, margin-top 0.1s ease, background-color 0.3s ease;
}
.btn-header:active, .btn-modo:active, .btn-verificar:active, .tk:active, .tk2:active {
  transform: translateY(4px); border-bottom: 0px solid rgba(0,0,0,0); margin-bottom: 4px;
}

.btn-header{
  padding: 10px 18px; border-radius: 50px; cursor:pointer; font-weight: 700; font-size: .95rem;
  background: var(--vermelho); color: white;
}
.btn-header.azul{ background: var(--azul-tile); }

.status-top { display:flex; gap:12px; align-items:center; font-weight: 900; }
.vidas-ui { font-size: 1.3rem; letter-spacing: 2px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); }
.combo-chip {
  background: linear-gradient(135deg, #ff9800, #ff5722); color: white;
  padding: 4px 12px; border-radius: 20px; font-size: 0.95rem; font-weight: 900;
  box-shadow: 0 4px 10px rgba(255, 87, 34, 0.4); display: none;
  animation: popSelo 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.combo-chip.ativo { display: inline-flex; }

.game-card{
  width:min(var(--app-max), 100%); background: rgba(255,255,255,.92); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px; display:flex; flex-direction:column; gap: 14px;
  position:relative; margin-top: 18px;
}

.ajuda-jogo{ background: rgba(255,255,255,.92); border: 2px solid rgba(47,128,237,.16); border-radius: 18px; padding: 10px 12px; font-weight: 700; color:#334155; box-shadow: 0 10px 18px rgba(0,0,0,.06); text-align: center; }
.ajuda-jogo b{ color: var(--azul-tile); }

#lista-contas{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 2px; transition: padding-bottom 0.3s ease; }

@keyframes popIn { 0% { opacity: 0; transform: scale(0.85) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

.linha-conta{
  display:flex; align-items:center; justify-content:center; gap: 8px; font-size: 1.4rem;
  background: rgba(255,255,255,.75); border-radius: 20px; padding: 12px 10px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06); border: 2px solid rgba(255,255,255,.8);
  position:relative; padding-right: 32px;
  animation: popIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.op{ font-weight: 700; color: var(--cinza); width: 22px; text-align:center; opacity:.9; }

.resp{
  width: 86px; font-size: 1.4rem; border-radius: 14px; border: 3px solid rgba(47,128,237,.25);
  text-align:center; padding: 6px 8px; outline:none; font-weight: 700; background: rgba(255,255,255,.95);
  transition: border-color .15s, box-shadow .15s;
}
.resp:focus{ border-color: rgba(47,128,237,.7); box-shadow: 0 0 0 6px rgba(47,128,237,.14); }

.correto{ border-color: rgba(39,174,96,.9) !important; background: rgba(39,174,96,.08) !important; animation: pop .22s ease; }
.errado{ border-color: rgba(231,76,60,.9) !important; background: rgba(231,76,60,.08) !important; animation: shake .25s ease; }

@keyframes pop{ 0%{ transform: scale(.96); } 100%{ transform: scale(1); } }
@keyframes shake{ 0%, 100%{ transform: translateX(0); } 30%{ transform: translateX(-4px); } 60%{ transform: translateX(4px); } }

.check-linha{
  position:absolute; right: 8px; top: 50%; transform: translateY(-50%) scale(.6); opacity: 0;
  transition: transform .18s, opacity .18s; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); pointer-events:none;
}
.linha-conta.linha-ok .check-linha{ opacity: 1; transform: translateY(-50%) scale(1); }

.btn-verificar{
  width:100%; padding: 16px 14px; border-radius: 22px; cursor:pointer; font-weight: 800;
  font-size: 1.05rem; background: linear-gradient(180deg, #ffb74d, var(--laranja)); color:#fff;
}

.overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,.45); z-index:2000; padding: 18px; }
.blur-ativo #area-principal{ filter: blur(3px); }

.menu-caixa{ width:min(560px, 100%); background: rgba(255,255,255,.95); border-radius: 28px; padding: 22px; box-shadow: var(--shadow); text-align:center; position:relative; overflow:auto; max-height: 90vh; }
.secao-titulo{ margin: 16px 0 8px; font-weight: 900; text-align:left; color:#344054; }
.grid-botoes{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }

.btn-modo{ position: relative; padding: 14px 12px; border-radius: 18px; cursor:pointer; font-weight:800; font-size: 1rem; color:#fff; }
.btn-sair-menu{ margin-top: 14px; width:100%; padding: 14px 12px; border-radius: 18px; cursor:pointer; font-weight:800; background:#ffffff; color:#333; box-shadow: 0 4px 10px rgba(0,0,0,.1); }

.btn-modo.feito{ background: var(--verde) !important; color: #fff !important; outline: 3px solid rgba(39,174,96,.55); }
.badge-feito{ position:absolute; top: -6px; right: -6px; font-size: 1.3rem; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); z-index: 10; }

/* ===============================
   NOVOS BOTÕES LATERAIS
================================== */
.controles-fixos {
  position: fixed;
  bottom: calc(16px + var(--safe-bottom));
  right: calc(16px + var(--safe-right));
  display: flex;
  flex-direction: column;
  gap: 16px; 
  z-index: 2200;
}

.btn-circular {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 4px solid #ffffff; 
  box-shadow: 0 8px 16px rgba(0,0,0,0.15); 
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff; 
  background: #a0aec0; 
  transition: transform 0.15s, background-color 0.3s;
}

.btn-circular:active {
  transform: scale(0.92);
}

.btn-circular.tela { background: #A890FE; } 
.btn-circular.teclado-btn { background: #3498DB; } 
.btn-circular.musica.ativo { background: #FF8A4C; } 
.btn-circular.voz.ativo { background: #2ECC71; } 

.btn-circular svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.btn-circular.musica svg,
.btn-circular.voz svg {
  fill: currentColor;
  stroke: none;
}

/* ===============================
   TECLADO MOBILE
================================== */
#btn-teclado{ display:none; }
.teclado-overlay{ position:fixed; inset:0; display:none; align-items:flex-end; justify-content:center; background: rgba(0,0,0,.1); z-index: 2550; padding: 6px; pointer-events: none; }
.teclado{ width: min(380px, 100vw); background: rgba(255,255,255,.98); border-radius: 22px; box-shadow: 0 -10px 40px rgba(0,0,0,.15); padding: 12px; padding-bottom: calc(12px + var(--safe-bottom)); pointer-events: auto; }
.teclado-topo{ display:flex; justify-content:space-between; margin-bottom: 10px; }
.teclado-fechar{ border:none; width: 40px; height: 40px; border-radius: 14px; background: rgba(231,76,60,.10); color: var(--vermelho); font-weight: 900; }
.teclado-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tk{ border-radius: 18px; padding: 14px 0; font-weight: 900; font-size: 1.25rem; background: #fff; background-color: #f8fafc; }
.tk-acao{ background: rgba(47,128,237,.10); color: var(--azul-tile); }
.teclado-acoes{ display:flex; gap: 10px; margin-top: 10px; }
.tk2{ flex:1; border-radius: 18px; padding: 14px 10px; font-weight: 900; background: #fff; }
.tk2-ok{ background: linear-gradient(180deg, #ffb74d, var(--laranja)); color: #fff; }

@media (max-width: 440px){
  header{ padding: 8px 10px; }
  .btn-header{ padding: 9px 12px; font-size: .85rem; }
  #lista-contas { gap: 6px; }
  .linha-conta{ font-size: 1.1rem; padding: 10px 4px; gap: 4px; border-radius: 14px; padding-right: 22px;}
  .op { width: 16px; }
  .resp{ width: 56px; font-size: 1.1rem; padding: 6px 4px; border-radius: 10px; }
  .check-linha { right: 4px; }
  .btn-circular{ width: 50px; height: 50px; }
  #btn-teclado{ display:flex; }
  .grid-botoes{ grid-template-columns: 1fr; }
}

@media (max-height: 720px) {
  .game-card { padding: 10px; gap: 8px; margin-top: 10px; }
  .ajuda-jogo { padding: 6px 8px; font-size: 0.9rem; }
  .linha-conta { padding: 6px 4px; font-size: 1.1rem; gap: 4px; border-radius: 12px; padding-right: 24px;}
  .resp { width: 50px; font-size: 1.1rem; padding: 4px; border-radius: 8px; }
  .btn-verificar { padding: 12px; font-size: 0.95rem; }
  #lista-contas { gap: 6px; }
  header { padding: 8px 10px; }
}

@media (max-height: 600px) {
  .game-card { margin-top: 5px; gap: 6px; padding: 8px; }
  .ajuda-jogo { font-size: 0.8rem; padding: 4px 6px; }
  .linha-conta { padding: 4px; font-size: 1rem; border-width: 1px; }
  .resp { width: 44px; font-size: 1rem; padding: 2px; border-width: 2px;}
  .btn-verificar { padding: 10px; font-size: 0.9rem; }
  .op { width: 14px; }
  header { padding: 6px 10px; }
  .btn-header { padding: 6px 10px; font-size: 0.8rem; }
}