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

:root{
  --laranja:#ff8a3d;
  --laranja-escuro:#d66e2d;
  --azul-ceu:#a5d8ff;
  --verde:#2ecc71;
  --verde-escuro:#219653;
  --vermelho:#ff7675;
  --vermelho-escuro:#d63031;
  --roxo:#a29bfe;
  --roxo-escuro:#6c5ce7;
  --cinza:#636e72;
  --vv-inset: 0px; 
}

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

body{
  font-family:'Fredoka',sans-serif;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  position:relative;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* Overlays (Telas modais) */
.overlay{
  position:fixed;inset:0;z-index:400;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;
  background:rgba(165,216,255,.3);
  backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
}
.card-info{
  background:#fff; border:8px solid var(--laranja); border-radius:40px;
  padding:30px; max-width:520px; width:min(92vw,520px);
  box-shadow:0 15px 40px rgba(0,0,0,.3); position:relative;
  max-height: 90vh; overflow-y: auto;
}

/* Painel do Jogo Principal */
.painel-jogo{
  background:#fff; border:8px solid var(--laranja); border-radius:40px;
  width:min(92vw,520px); margin-top:18px; padding:22px 18px;
  text-align:center; box-shadow:0 15px 30px rgba(0,0,0,.10);
  position:relative; z-index:10;
}

/* Topo e Botões */
.topo{
  width:100%; padding:10px 12px; display:flex; align-items:center;
  justify-content:space-between; background:rgba(255,255,255,.92);
  z-index:20; box-shadow:0 6px 20px rgba(0,0,0,.08); position: relative;
}
.grupo-esq { display:flex; align-items:center; gap:8px; flex-wrap:wrap; z-index: 2; }
.lado-dir { display:flex; align-items:center; gap:10px; justify-content:flex-end; z-index: 2; }

.btn-sair, .btn-modo {
  text-decoration:none; color:#fff; padding:8px 14px; border-radius:50px;
  font-weight:900; font-size:.85rem; cursor:pointer; font-family:'Fredoka',sans-serif;
  transition: 0.1s; border:none; display:inline-flex; align-items:center; justify-content:center;
}
.btn-sair{background:var(--vermelho); box-shadow: 0 4px 0 var(--vermelho-escuro);}
.btn-sair:active{transform: translateY(4px); box-shadow: 0 0px 0 var(--vermelho-escuro);}

.btn-modo{background:var(--roxo); box-shadow: 0 4px 0 var(--roxo-escuro);}
.btn-modo:active{transform: translateY(4px); box-shadow: 0 0px 0 var(--roxo-escuro);}

/* Barra de Progresso Centralizada */
.progresso-wrapper{
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 360px; display: flex; justify-content: center;
  pointer-events: none; z-index: 1;
}
.progresso-container{ width: 100%; height:12px; background:#eee; border-radius:10px; border:2px solid #fff; overflow:hidden; }
#barra{ width:0%; height:100%; background:var(--verde); transition:.5s; }

/* Status Recorde no Topo */
.status-topo {
  font-weight: 900; color: var(--roxo); font-size: 1.25rem; background: #fff;
  padding: 6px 14px; border-radius: 20px; border: 4px solid var(--roxo);
  box-shadow: 0 4px 10px rgba(0,0,0,.1); white-space: nowrap; user-select: none;
}
.status-topo span { color: var(--laranja); font-size: 1.45rem; }

/* Controles fixos canto inferior direito (Som/Tela) */
.floating-controls{
  position:fixed; right:calc(12px + env(safe-area-inset-right)); bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:300; display:flex; flex-direction:column; gap:10px;
}
.btn-circular{
  width:54px; height:54px; border-radius:50%; border:4px solid rgba(255,255,255,.95);
  cursor:pointer; font-size:1.35rem; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 0 rgba(0,0,0,.15); background:#fff; transition: all 0.1s ease;
}
.btn-circular:active{transform:translateY(6px); box-shadow:0 0px 0 rgba(0,0,0,.15);}
.btn-fs{background:var(--roxo);color:#fff;}
.btn-som{background:#fff;color:#222;}
.btn-som.ativo{background:var(--verde);color:#fff;}

/* Elementos de Jogo: Equação, Input, Teclado */
.equacao{ font-size:3.2rem; font-weight:900; color:#2d3436; margin:14px 0 10px; letter-spacing:2px; display:inline-block; }
.op.plus { color: var(--verde); font-size: 1.1em; } 
.op.minus { color: var(--vermelho); font-size: 1.1em; }

#feedback{font-weight:900;color:var(--cinza);min-height:1.2em;margin-bottom:6px;}

input#resposta{
  width:200px; max-width:70vw; padding:14px 16px; font-size:2.2rem;
  border:4px solid #ddd; border-radius:20px; text-align:center; outline:none;
  font-family:'Fredoka',sans-serif; color:var(--laranja); margin:8px 0 14px; background:#fff;
}
input#resposta:focus { border-color: var(--laranja); }

.btn-acao{
  background:var(--verde); color:#fff; border:none; padding:14px 28px; font-size:1.3rem; border-radius:50px;
  cursor:pointer; font-weight:900; box-shadow:0 8px 0 var(--verde-escuro); text-transform:uppercase;
  width:100%; margin-top:8px; transition: all 0.1s ease;
}
.btn-acao:active{transform:translateY(8px);box-shadow:0 0px 0 var(--verde-escuro);}

/* Teclado Virtual */
.teclado-wrap{ margin-top:10px; background:#f6f7fb; border-radius:22px; padding:10px; border:3px solid rgba(0,0,0,.06); }
.teclado-topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 6px 8px; user-select:none; }
.teclado-topo .titulo{font-weight:900;color:#2d3436;font-size:.95rem;}
.teclado-topo .btn-mini{ border:none; border-radius:999px; padding:8px 10px; font-family:'Fredoka',sans-serif; font-weight:900; cursor:pointer; background:#fff; box-shadow:0 4px 0 rgba(0,0,0,.08); font-size:.85rem; }
.teclado{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding-bottom: 6px; }
.key{ border:none; border-radius:18px; padding:14px 0; font-family:'Fredoka',sans-serif; font-weight:900; font-size:1.35rem; cursor:pointer; background:#fff; box-shadow:0 6px 0 rgba(0,0,0,.12); color: #2d3436; user-select:none; transition: all 0.1s ease; }
.key:active{transform:translateY(6px);box-shadow:0 0px 0 rgba(0,0,0,.12);}
.key.ok{background:var(--verde);color:#fff;box-shadow:0 6px 0 var(--verde-escuro);}
.key.ok:active{box-shadow:0 0px 0 var(--verde-escuro);}
.key.back{background:var(--vermelho);color:#fff;box-shadow:0 6px 0 var(--vermelho-escuro);}
.key.back:active{box-shadow:0 0px 0 var(--vermelho-escuro);}

/* Status Inferior (Pontos / Sequência) */
.status-inferior{ display: flex; justify-content: center; gap: 12px; margin-top: 15px; width: min(92vw, 520px); z-index: 10; position: relative;}
.status-box{ background: #fff; border: 5px solid var(--laranja); border-radius: 25px; padding: 10px 15px; font-weight: 900; font-size: 1.15rem; color: #2d3436; box-shadow: 0 8px 20px rgba(0,0,0,.12); flex: 1; text-align: center; }
.status-box.streak-box { border-color: #ff7675; }
.streak-box.hot { border-color: #d63031; color: #d63031; box-shadow: 0 0 15px rgba(214, 48, 49, 0.4); }

/* Topo do painel: rodada + repetir fala */
.panel-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; user-select:none; }
.rodada-pill{ display:inline-flex; align-items:center; padding:8px 12px; border-radius:999px; background:#f6f7fb; border:2px solid rgba(0,0,0,.06); font-weight:900; color:#2d3436; font-size:.95rem; }
.icon-btn{ width:44px; height:44px; border-radius:14px; border:2px solid rgba(0,0,0,.08); background:#fff; box-shadow:0 6px 0 rgba(0,0,0,.10); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:1.15rem; }

/* Grid Modos e Dificuldades */
.grid-dificuldade{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.btn-dif{ background:var(--roxo); color:#fff; border:none; padding:14px; border-radius:15px; cursor:pointer; font-weight:900; font-family:'Fredoka',sans-serif; font-size:1rem; box-shadow:0 6px 0 var(--roxo-escuro); }
.btn-modo-especial { background: var(--vermelho); box-shadow: 0 6px 0 var(--vermelho-escuro); }
.btn-modo-tempo { background: var(--laranja); box-shadow: 0 6px 0 var(--laranja-escuro); }

/* FX e Badges */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:999;}
.badge{ position:absolute; left:50%; top:74px; transform:translateX(-50%); padding:10px 16px; border-radius:999px; font-weight:900; font-size:1.05rem; color:#fff; opacity:0; pointer-events:none; box-shadow:0 12px 26px rgba(0,0,0,.14); z-index: 10; }
.badge.ok{background:var(--verde);} .badge.no{background:var(--vermelho);}
.badge.show{animation:badgePop 620ms ease-out forwards;}
@keyframes badgePop{ 0%{opacity:0;transform:translateX(-50%) translateY(8px) scale(.8);} 20%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.06);} 100%{opacity:0;transform:translateX(-50%) translateY(-18px) scale(1.02);} }
.pop{animation:eqPop 340ms ease-out;}
@keyframes eqPop{0%{transform:scale(1);}35%{transform:scale(1.10);}100%{transform:scale(1);}}
.error-shake { animation: panelShake 0.4s ease-in-out; border-color: var(--vermelho) !important; }
@keyframes panelShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-15px) rotate(-1deg); } 40% { transform: translateX(15px) rotate(1deg); } 60% { transform: translateX(-10px) rotate(-1deg); } 80% { transform: translateX(10px) rotate(1deg); } }
.estrelas-rank { font-size: 3.5rem; margin: 10px 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); animation: popStars 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes popStars { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ========================================================= */
/* Ajuste ESPECÍFICO para Notebooks (ex: 1366x768) */
/* ========================================================= */
@media (max-height: 820px) and (min-width: 521px) {
    .topo { padding: 6px 12px; }
    .painel-jogo { margin-top: 6px; padding: 10px 14px; }
    .equacao { font-size: 2.4rem; margin: 4px 0 6px; }
    #feedback { margin-bottom: 4px; font-size: 0.9rem; }
    input#resposta { font-size: 1.8rem; padding: 8px; margin: 4px 0 8px; height: auto; }
    .btn-acao { padding: 10px 20px; font-size: 1.1rem; margin-top: 4px; }
    
    /* Compressão do Teclado e Status */
    .teclado-wrap { margin-top: 4px; padding: 6px; }
    .teclado-topo { padding: 0 4px 4px; }
    .teclado-topo .titulo { font-size: 0.85rem; }
    .teclado-topo .btn-mini { padding: 6px 8px; font-size: 0.75rem; }
    .key { padding: 6px 0; font-size: 1.15rem; border-radius: 12px; }
    
    .status-inferior { margin-top: 8px; }
    .status-box { padding: 6px 12px; font-size: 0.95rem; border-width: 3px; }
    
    /* Botões Flutuantes (Som e Tela Cheia) */
    .floating-controls { gap: 6px; right: 12px; bottom: 12px; }
    .btn-circular { width: 44px; height: 44px; font-size: 1.1rem; border-width: 3px; }
}

/* Extra compressão caso o navegador não esteja maximizado */
@media (max-height: 660px) and (min-width: 521px) {
    .equacao { font-size: 2.1rem; margin: 2px 0 4px; }
    input#resposta { font-size: 1.5rem; padding: 6px; margin: 2px 0 6px; }
    .btn-acao { padding: 8px 15px; font-size: 1rem; }
    .key { padding: 4px 0; font-size: 1.05rem; }
    .painel-jogo { padding: 8px 12px; margin-top: 4px; }
}

/* Mobile Adaptations */
@media (max-width: 520px) {
    .equacao{font-size:2.6rem;}
    input#resposta{font-size:2rem;width:190px;}
    .btn-circular{width:50px;height:50px;font-size:1.25rem;border-width:3px;}
    .icon-btn{width:42px;height:42px;border-radius:14px;}
    .rodada-pill{font-size:.9rem;padding:7px 10px;}
    .progresso-wrapper{max-width:180px;}
    .btn-sair,.btn-modo{padding:6px 10px;font-size:.75rem;}
    .key{padding:12px 0;font-size:1.25rem;border-radius:16px;}
    .status-topo { font-size: .95rem; border-width: 3px; padding: 4px 8px; }
    .status-topo span { font-size: 1.15rem; }
    .status-box { font-size: 0.95rem; padding: 8px 10px; border-width: 4px; }
    .status-inferior { gap: 8px; margin-top: 10px; }
    .card-info { padding: 20px; }
    .btn-dif { padding: 12px; font-size: 0.9rem; }
}
@media (max-height:680px) and (max-width:520px){
    .painel-jogo{padding:14px 12px;margin-top:8px;}
    .equacao{font-size:2.35rem;margin:10px 0 6px;}
    input#resposta{font-size:1.85rem;padding:10px 12px;margin:6px 0 10px;}
    .teclado-wrap{padding:6px;margin-top:8px;}
    .teclado-topo{display:none;}
    .teclado{gap:8px;}
    .key{padding:10px 0;font-size:1.12rem;border-radius:14px;}
}