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

:root{
  --laranja:#ff9800;
  --btn-vermelho:#ff7675;
  --btn-verde:#2ecc71;
  --azul-tile:#6c5ce7;
  --roxo:#8e44ad;
  --kb:0px;
}

*{ -webkit-tap-highlight-color: transparent; }
html, body { height: auto; }

body{
  font-family:'Fredoka',sans-serif;
  margin:0;
  overflow-x:hidden;
  overflow-y:auto;             
  min-height:100dvh;           
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
}

.blur-ativo #area-principal{filter:blur(15px); pointer-events:none;}

#area-principal{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:10;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px) + var(--kb));
}

header{
  background:rgba(255,255,255,.95);
  width:100%;
  padding:12px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:100;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
  box-sizing:border-box;
  gap:10px;
  flex-wrap:nowrap;
  position: sticky;
  top: 0;
  backdrop-filter: blur(6px);
}

.header-left { flex: 1; display: flex; justify-content: flex-start; gap: 8px; flex-wrap: wrap;}
.header-center { flex: 1; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.header-right { flex: 1; display: flex; justify-content: flex-end; }

.mini-bloco{
  text-align:center;
  padding:6px 10px;
  border-radius:14px;
  background:rgba(108,92,231,.08);
}

.tempo-barra{
  width:150px;
  height:12px;
  border-radius:999px;
  background:rgba(0,0,0,.08);
  overflow:hidden;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.12);
}
.tempo-preenchido{
  height:100%;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#2ecc71 0%, #f1c40f 45%, #ff7675 100%);
  transform-origin:left center;
  transition:transform .25s ease, background-color 0.25s;
}

.alerta-tempo {
  animation: piscaAlerta 0.6s infinite !important;
  background: #e74c3c !important;
}
@keyframes piscaAlerta {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.btn-header{
  cursor:pointer;
  padding:10px 18px;
  border-radius:50px;
  border:none;
  color:#fff;
  font-weight:bold;
  font-family:'Fredoka';
  font-size:.85rem;
  text-decoration:none;
  touch-action: manipulation;
  transition: transform 0.1s;
}
.btn-vermelho { background:var(--btn-vermelho); box-shadow:0 4px 0 #c0392b; }
.btn-vermelho:active { transform:translateY(4px); box-shadow:0 0 0 #c0392b; }

.btn-azul { background:var(--azul-tile); box-shadow:0 4px 0 #4a3eb1; }
.btn-azul:active { transform:translateY(4px); box-shadow:0 0 0 #4a3eb1; }

.record-destaque {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--roxo);
  text-shadow: 1px 1px 0px rgba(0,0,0,0.1);
  text-align: right;
}

.game-card{
  background:#fff;
  color:#333;
  padding:20px;
  border-radius:30px;
  width:90%;
  max-width:900px;
  box-shadow:0 10px 0 rgba(0,0,0,.1);
  text-align:center;
  margin: 16px 0 18px;
  position:relative;
}

.status-inferior {
  background: #fff;
  padding: 15px 25px;
  border-radius: 20px;
  width: 90%;
  max-width: 900px;
  display: flex;
  gap: 20px;
  justify-content: space-around;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 20px;
}

.letra-circulo{
  background:#ffeaa7;
  color:#d63031;
  font-size:3rem;
  font-weight:bold;
  width:72px;
  height:72px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  margin:0 auto 15px auto;
  border:5px solid #fab1a0;
  box-shadow:0 10px 0 rgba(0,0,0,.08);
  position: relative;
}

.letra-pulse{animation:pulseLetra 420ms ease;}
@keyframes pulseLetra{
  0%{transform:scale(1)}
  45%{transform:scale(1.10) rotate(-2deg)}
  100%{transform:scale(1)}
}

.grade-campos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
  margin-bottom:20px;
}
.campo{text-align:left;}

label{
  font-weight:bold;
  display:block;
  margin-bottom:4px;
  color:#636e72;
  font-size:.75rem;
  text-transform:uppercase;
}

input{
  width:100%;
  padding:10px 10px;
  font-size:16px; 
  border:3px solid #b2bec3;
  border-radius:14px;
  font-family:'Fredoka';
  outline:none;
  box-sizing:border-box;
  scroll-margin-top: 92px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
input:focus{
  border-color:rgba(108,92,231,.75);
  box-shadow:0 0 0 4px rgba(108,92,231,.15);
}

input.certo{
  border-color:#00b894 !important;
  background:#e6fffb !important;
  color:#00b894 !important;
  font-weight:bold;
}
input.errado{
  border-color:#d63031 !important;
  background:#fff5f5 !important;
  color:#d63031 !important;
}

.pop{animation:pop 220ms ease;}
@keyframes pop{0%{transform:scale(1)} 60%{transform:scale(1.06)} 100%{transform:scale(1)}}

.shake{animation:shake 260ms ease;}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

.btn-acao{
  background:var(--laranja);
  color:#fff;
  border:none;
  padding:18px;
  font-size:1.25rem;
  border-radius:20px;
  cursor:pointer;
  width:100%;
  font-family:'Fredoka';
  font-weight:bold;
  text-transform:uppercase;
  box-shadow:0 10px 0 #e67e22;
  border-bottom: 2px solid rgba(0,0,0,0.1);
  margin-top:10px;
  position: relative;
  touch-action: manipulation;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-acao.pronto{animation: btnPulse 1.7s ease-in-out infinite;}
@keyframes btnPulse{
  0%{ transform: translateY(0); filter: brightness(1); }
  50%{ transform: translateY(-2px); filter: brightness(1.03); }
  100%{ transform: translateY(0); filter: brightness(1); }
}
.btn-acao:active{
  transform: translateY(8px);
  box-shadow: 0 2px 0 #e67e22;
}

.overlay{
  position:fixed; inset:0;
  background:rgba(44,62,80,.95);
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:2000;
  text-align:center;
  overflow:auto;
  padding: 16px;
  box-sizing: border-box;
}

.menu-caixa{
  background:#fff;
  padding:30px;
  border-radius:35px;
  border:8px solid var(--laranja);
  width:85%;
  max-width:520px;
  box-sizing:border-box;
}

.shuffle-box{
  background: rgba(255,255,255,0.96);
  border: 8px solid rgba(108,92,231,0.55);
  border-radius: 34px;
  width: min(520px, 88vw);
  padding: 22px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  box-sizing:border-box;
}
.shuffle-ring{
  width: 120px; height: 120px;
  border-radius: 999px;
  margin: 10px auto 10px;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #ffeaa7 45%, #ffd36e 100%);
  border: 6px solid rgba(255,118,117,0.70);
  box-shadow: 0 12px 0 rgba(0,0,0,0.10);
  position: relative;
  overflow:hidden;
}

.shuffle-letter{
  font-size: 4.2rem;
  font-weight: 900;
  color: #d63031;
  position: relative;
  z-index: 2;
  text-shadow: 0 8px 0 rgba(0,0,0,0.08);
  animation: letterJitter 0.10s linear infinite;
}
@keyframes letterJitter{
  0%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(1px,-1px) rotate(-1deg); }
  100%{ transform: translate(0,0) rotate(0deg); }
}
.shuffle-final .shuffle-letter{ animation: finalPop 380ms ease; }
@keyframes finalPop{
  0%{ transform: scale(0.85); }
  60%{ transform: scale(1.12) rotate(-2deg); }
  100%{ transform: scale(1); }
}

.controles-fixos{
  position:fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px) + var(--kb));
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:2100;
}

.btn-circular{
  width:60px; height:60px;
  border-radius:50%;
  border:none;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  box-shadow:0 6px 0 rgba(0,0,0,.15);
  transition: transform .1s, box-shadow .1s;
  touch-action: manipulation;
}
.btn-circular:active{
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.btn-circular.ativo{background:var(--btn-verde); color:#fff;}

.confete{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2400;
  overflow:hidden;
}
.confete span{
  position:absolute;
  width:10px; height:14px;
  border-radius:4px;
  opacity:.95;
  animation:cair 1200ms linear forwards;
  transform:translateY(-20px) rotate(0deg);
}
@keyframes cair{to{transform:translateY(110vh) rotate(720deg); opacity:.9;}}

#tela-tutorial{ display:flex; align-items:center; justify-content:center; }
#tela-tutorial .menu-caixa{ margin: 0 auto; box-sizing: border-box; }
#tela-tutorial p{ text-align:center; }

@media (max-width:850px){
  header { flex-wrap: wrap; justify-content: center; padding: 10px; }
  .header-left { justify-content: center; width: 100%; margin-bottom: 12px; }
  .header-center { width: 100%; justify-content: center; margin-bottom: 12px; }
  .header-right { width: 100%; justify-content: center; }
  .record-destaque { font-size: 1.2rem; text-align: center; }
}

@media (max-width:520px){
  .grade-campos{grid-template-columns:1fr;}
  .game-card{width:94%; margin-top:12px;}
  .status-inferior{width:94%; padding:12px; flex-direction:column; gap:8px;}
  .letra-circulo{width:64px; height:64px; font-size:2.6rem;}
}