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

:root{
  --laranja:#ff8a3d;
  --laranja-escuro:#d66e2d;
  --azul-ceu:#a5d8ff;
  --azul-profundo:#74b9ff;
  --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;
}


.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,600px);
  box-shadow:0 15px 40px rgba(0,0,0,.3); position:relative;
  max-height: 90vh; overflow-y: auto;
}

.painel-jogo{
  background:#fff; border:8px solid var(--laranja); border-radius:40px;
  margin-top:18px; padding:22px 18px;
  text-align:center; box-shadow:0 15px 30px rgba(0,0,0,.10);
  position:relative; z-index:10;
  display: flex; flex-direction: column;
}

.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; }

.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; }

.btn-sair, .btn-modo, .btn-sobre {
  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-sobre{background:var(--azul-ceu); color:#222; box-shadow: 0 4px 0 #85bce6;}
.btn-sobre:active{transform: translateY(4px); box-shadow: 0 0px 0 #85bce6;}
.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);}

.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;}

/* ÁREA DE JOGO */
.area-jogo {
  display: flex;
  flex-direction: column;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: auto; 
  padding: 10px;
  margin: 10px 0;
  border: 2px dashed #ddd;
  border-radius: 15px;
  background: #fdfdfd;
}
/* Quando só tem 1 tabuada o scroll não precisa, deixa a altura livre */
.area-jogo.modo-unico {
  max-height: none;
  overflow: visible;
}

/* Scrollbar Customizada */
.area-jogo::-webkit-scrollbar { width: 10px; height: 10px; }
.area-jogo::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
.area-jogo::-webkit-scrollbar-thumb { background: var(--laranja); border-radius: 10px; }
.area-jogo::-webkit-scrollbar-thumb:hover { background: var(--laranja-escuro); }

/* MODO CLÁSSICO */
.container-classico {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 15px;
  justify-content: center;
}
@media (max-width: 1100px) {
  .container-classico { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .container-classico { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .container-classico { grid-template-columns: 1fr; }
}

/* Layout compacto para 1 tabuada individual */
.container-classico-unico {
  display: flex;
  justify-content: center;
}
.container-classico-unico .card-tabuada {
  width: 100%;
  border-width: 5px;
  padding: 14px 16px;
}
.container-classico-unico .linha-conta-classica {
  font-size: 1.35rem;
  padding: 2px 0;
  margin-bottom: 4px;
}
.container-classico-unico .linha-conta-classica input.resposta-item {
  width: 62px;
  font-size: 1.25rem;
  padding: 4px 6px;
}
.container-classico-unico .card-tabuada h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  margin-top: 0;
}
.card-tabuada {
  background: #fff;
  border: 4px solid var(--laranja);
  border-radius: 15px;
  padding: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.card-tabuada h3 {
  margin: 0 0 10px 0;
  color: var(--roxo);
  font-size: 1.2rem;
  text-align: center;
}
.linha-conta-classica {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 1.2rem;
  font-weight: 900;
  color: #2d3436;
}
.linha-conta-classica input.resposta-item {
  width: 50px;
  padding: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 8px;
  outline: none;
  font-family: 'Fredoka', sans-serif;
  color: var(--laranja-escuro);
}
.linha-conta-classica input.resposta-item:focus {
  border-color: var(--laranja);
  background: #fff3e0;
  box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.4);
  transform: scale(1.1);
  z-index: 10;
  position: relative;
}
.linha-conta-classica input.resposta-item:read-only {
  background: #e8f8f5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.linha-conta-classica input.resposta-item.correto {
  border-color: var(--verde);
  color: var(--verde-escuro);
  background: #e8f8f5;
}
.linha-conta-classica input.resposta-item.errado {
  border-color: var(--vermelho);
  color: var(--vermelho-escuro);
  background: #fdedec;
}

/* MODO PITAGÓRICO (GRID) */
.container-pitagorica {
  display: grid;
  grid-template-columns: 45px repeat(10, 1fr);
  gap: 4px;
  min-width: 500px; 
  margin: 0 auto;
  position: relative;
}
.celula-header {
  background: var(--roxo);
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  border-radius: 6px;
  font-size: 1.1rem;
  box-shadow: 0 2px 0 var(--roxo-escuro);
  position: sticky; top: 0; z-index: 2;
}
.celula-header:nth-child(11n+1) {
  position: sticky; left: 0; z-index: 2;
}
.panel-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rodada-pill { 
  background: var(--azul-ceu); color: #fff; padding: 6px 14px; 
  border-radius: 20px; font-weight: 700; font-size: 1.1rem; 
  box-shadow: 0 4px 0 var(--azul-profundo); 
}
.btn-dica {
  background: #f1c40f; color: #fff; padding: 6px 12px;
  border-radius: 12px; font-weight: 800; font-size: 1rem;
  border: 2px solid #fff; box-shadow: 0 4px 0 #d4ac0d;
  cursor: pointer; text-align: center; line-height: 1.1;
  transition: transform 0.1s;
}
.btn-dica:active { transform: translateY(4px); box-shadow: 0 0 0 #d4ac0d; }
.btn-dica:disabled { filter: grayscale(1); opacity: 0.7; cursor: not-allowed; }

.fab-container { display: flex; justify-content: center; width: 100%; margin-top: 15px; }
.btn-conferir {
  background: var(--verde); color: white; border: none; padding: 18px 40px;
  font-size: 1.5rem; font-weight: 900; border-radius: 35px;
  cursor: pointer; box-shadow: 0 8px 0 var(--verde-escuro);
  text-transform: uppercase; letter-spacing: 1px; transition: transform 0.1s;
  width: 100%;
}
.btn-conferir:active { transform: translateY(8px); box-shadow: 0 0 0 var(--verde-escuro); }
.celula-header.corner {
  background: var(--laranja);
  box-shadow: 0 2px 0 var(--laranja-escuro);
  font-size: 1.3rem;
}
.celula-input {
  width: 100%;
  padding: 8px 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 900;
  border: 2px solid #ddd;
  border-radius: 6px;
  outline: none;
  font-family: 'Fredoka', sans-serif;
  color: #2d3436;
  background: #fff;
  transition: 0.2s;
}
.celula-input:focus {
  border-color: var(--laranja);
  background: #fff3e0;
  box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.4);
  transform: scale(1.15);
  z-index: 10;
  position: relative;
}
.celula-input:read-only {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.celula-input.correto {
  border-color: var(--verde);
  color: var(--verde-escuro);
  background: #e8f8f5;
}
.celula-input.errado {
  border-color: var(--vermelho);
  color: var(--vermelho-escuro);
  background: #fdedec;
}

/* BOTÕES GERAIS */
.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; flex-shrink: 0;
}
.btn-acao:active{transform:translateY(8px);box-shadow:0 0px 0 var(--verde-escuro);}

.panel-top{ display:flex; align-items:center; justify-content:center; 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:1.2rem; }

.grid-dificuldade{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.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); }

/* Botões Modos Principais no Menu */
.grid-modos-principais { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-modo-principal {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: none; border-radius: 20px; padding: 18px 10px; cursor: pointer;
  font-family: 'Fredoka', sans-serif; font-weight: 900;
  transition: all 0.15s ease; position: relative; gap: 4px;
}
.btn-modo-principal:active { transform: translateY(5px); }
.btn-verde { background: var(--verde); box-shadow: 0 7px 0 var(--verde-escuro); color: #fff; }
.btn-roxo  { background: var(--roxo);  box-shadow: 0 7px 0 var(--roxo-escuro);  color: #fff; }
.btn-mode-concluido { background: var(--verde) !important; box-shadow: 0 7px 0 var(--verde-escuro) !important; }
.btn-modo-icon  { font-size: 2rem; line-height: 1; }
.btn-modo-label { font-size: 1.05rem; font-weight: 900; }
.btn-modo-sub   { font-size: 0.8rem;  font-weight: 700; opacity: 0.85; }
.check-modo     { font-size: 0.8rem; background: rgba(255,255,255,.25); padding: 3px 8px; border-radius: 99px; margin-top: 2px; }

/* Grid Tabuadas Individuais */
.grid-tabuadas-ind { display:grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.btn-tab-ind {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: none; border-radius: 14px; padding: 10px 6px; cursor: pointer;
  font-family: 'Fredoka', sans-serif; gap: 2px;
  background: var(--azul-ceu); color: #222;
  box-shadow: 0 5px 0 #85bce6;
  transition: all 0.12s ease;
}
.btn-tab-ind:active { transform: translateY(5px); box-shadow: 0 0 0 #85bce6; }
.btn-tab-ind.concluido { background: var(--verde) !important; color: #fff !important; box-shadow: 0 5px 0 var(--verde-escuro) !important; }
.tab-num  { font-size: 1.5rem; font-weight: 900; line-height: 1; }
.tab-txt  { font-size: 0.65rem; font-weight: 700; opacity: 0.8; }
.tab-check{ font-size: 0.8rem; }

/* STATUS INFERIOR (Pontos e Acertos) */
.status-inferior{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 15px; width: min(95vw, 1200px); 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; min-width: 150px; max-width: 300px;}
.status-box.streak-box { border-color: #a29bfe; }
.status-box.tempo-box { border-color: var(--azul-ceu); }

#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);} }

/* ===== TELA FINAL (VITÓRIA) ===== */
.card-final {
  background: #fff;
  border: 8px solid var(--roxo);
  border-radius: 40px;
  padding: 35px 30px;
  max-width: 480px;
  width: min(92vw, 480px);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  text-align: center;
  position: relative;
  animation: cardPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes cardPop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.final-deco { font-size: 3.5rem; margin-bottom: -5px; animation: trofeuBounce 1s infinite alternate ease-in-out; }
@keyframes trofeuBounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.final-titulo { font-size: 3rem; font-weight: 900; color: var(--roxo); margin: 8px 0 0; }
.final-subtitulo { font-size: 1.1rem; color: #777; font-weight: 700; margin: 4px 0 10px; }

.final-score-box {
  background: linear-gradient(135deg, var(--roxo), var(--roxo-escuro));
  border-radius: 24px;
  padding: 20px 30px;
  margin: 12px 0 16px;
  box-shadow: 0 10px 30px rgba(108, 92, 231, 0.35);
}
.final-score-label { font-size: 0.85rem; font-weight: 900; color: rgba(255,255,255,.75); letter-spacing: 2px; text-transform: uppercase; }
.final-score-valor { font-size: 5rem; font-weight: 900; color: #fff; line-height: 1.05; text-shadow: 0 4px 10px rgba(0,0,0,.2); }
.final-score-sub { font-size: 1rem; color: rgba(255,255,255,.85); font-weight: 700; margin-top: 4px; }

.final-detalhes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 4px; }
.final-detalhe-item {
  display: flex; align-items: center; gap: 6px;
  background: #f6f7fb; border-radius: 12px; padding: 8px 14px;
  font-size: 1rem; font-weight: 900;
}
.final-detalhe-icon { font-size: 1.1rem; }
.final-detalhe-txt { color: #2d3436; }

.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 voando em cada resposta certa */
@keyframes starFlyL {
  0%   { transform: translate(0,0) scale(1.2); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(-55px, -80px) scale(0.2) rotate(-50deg); opacity: 0; }
}
@keyframes starFlyR {
  0%   { transform: translate(0,0) scale(1.2); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(55px, -80px) scale(0.2) rotate(50deg); opacity: 0; }
}
.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; } }

/* Texto de Combo Subindo */
.combo-texto {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 4rem; font-weight: 900; color: #ff9f43; z-index: 9999;
  text-shadow: 0 4px 0 #d35400, 0 0 20px rgba(255,159,67,0.8);
  pointer-events: none;
  animation: comboRise 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes comboRise {
  0% { transform: translate(-50%, 0) scale(0.5) rotate(-10deg); opacity: 0; }
  20% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); opacity: 1; }
  80% { transform: translate(-50%, -80%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -100%) scale(1) rotate(0deg); opacity: 0; }
}

/* Mobile Adaptations */
@media (max-width: 520px) {
    .btn-circular{width:50px;height:50px;font-size:1.25rem;border-width:3px;}
    .btn-sair,.btn-modo,.btn-sobre{padding:6px 10px;font-size:.75rem;}
    .card-info { padding: 20px; }
    .btn-dif { padding: 12px; font-size: 0.9rem; }
    .area-jogo { max-height: 45vh; padding: 5px; }
    
    .celula-header { font-size: 0.9rem; padding: 6px 2px; }
    .celula-input { font-size: 1.1rem; padding: 10px 0; } 
    .status-topo { font-size: 0.9rem; padding: 4px 8px; border-width: 3px; }
    .status-topo span { font-size: 1.1rem; }
    
    .status-box { padding: 6px 10px; font-size: 0.95rem; border-width: 3px; border-radius: 15px; }

    /* FAB (Floating Action Button) Conferir no mobile */
    .fab-container { position: sticky; bottom: 0; padding: 10px 0; background: linear-gradient(to top, rgba(255,255,255,1) 70%, transparent); margin-top: 5px; }
    .btn-conferir { padding: 12px 20px; font-size: 1.1rem; }
}

/* ====================================================== */
/* TELAS MÉDIAS (notebooks 1366x768 e similares)          */
/* ====================================================== */
@media (max-height: 800px) {
    .area-jogo { max-height: 42vh; }
    /* CORREÇÃO ESPECÍFICA: modo-unico tem maior especificidade, precisa ser
       explicitamente sobrescrito aqui para não ultrapassar o viewport */
    .area-jogo.modo-unico { max-height: 42vh; overflow-y: auto; }
    .painel-jogo { padding: 16px 14px; margin-top: 12px; }
    .btn-conferir { padding: 14px 28px; font-size: 1.25rem; }
    .status-inferior { margin-top: 10px; gap: 8px; }

    /* Tabuada individual mais compacta */
    .container-classico-unico .linha-conta-classica { font-size: 1.15rem; padding: 1px 0; margin-bottom: 3px; }
    .container-classico-unico .linha-conta-classica input.resposta-item { font-size: 1.1rem; width: 56px; padding: 3px 5px; }
    .container-classico-unico .card-tabuada h3 { font-size: 1.15rem; margin-bottom: 6px; }
}

@media (max-height: 750px) {
    .area-jogo { max-height: 40vh; }
    .area-jogo.modo-unico { max-height: 40vh; overflow-y: auto; }
    .painel-jogo { padding: 15px 12px; margin-top: 10px; }
    .btn-conferir { padding: 14px 20px; font-size: 1.2rem; }

    .container-classico-unico .linha-conta-classica { font-size: 1.05rem; padding: 0; margin-bottom: 2px; }
    .container-classico-unico .linha-conta-classica input.resposta-item { font-size: 1rem; width: 52px; padding: 3px 4px; }
    .container-classico-unico .card-tabuada h3 { font-size: 1.05rem; margin-bottom: 5px; }
    .container-classico-unico .card-tabuada { padding: 10px 12px; }
}

@media (max-height: 650px) {
    .area-jogo { max-height: 35vh; }
    .area-jogo.modo-unico { max-height: 38vh; overflow-y: auto; }
    .painel-jogo { padding: 10px 8px; margin-top: 5px; }
    .fab-container { margin-top: 5px; padding: 5px 0; }
    .btn-conferir { padding: 10px 16px; font-size: 1.1rem; }
    .status-inferior { margin-top: 8px; gap: 8px; }
    .status-box { font-size: 0.9rem; padding: 5px 8px; }
    .topo { padding: 6px 8px; }
    .panel-top { margin-bottom: 5px; }

    .container-classico-unico .linha-conta-classica { font-size: 1rem; padding: 0; margin-bottom: 1px; }
    .container-classico-unico .linha-conta-classica input.resposta-item { font-size: 0.95rem; width: 48px; padding: 2px 4px; }
    .container-classico-unico .card-tabuada h3 { font-size: 1rem; margin-bottom: 4px; }
    .container-classico-unico .card-tabuada { padding: 8px 10px; }
}