* { box-sizing: border-box; }
:root {
  --azul: #3aa0ff; --azul-esc: #1664c0; --amarelo: #ffd23f; --rosa: #ff7ac8; --verde: #44c767;
  --texto: #1b2a4a; --letra: "Arial Black", "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif;
}
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #7fd3ff;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: var(--texto);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: none;
}
#jogo { position: fixed; inset: 0; }
#mundo { position: absolute; inset: 0; }
#mundo canvas { display: block; width: 100%; height: 100%; touch-action: none; }
button { font: inherit; cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

/* ---------------- mira ---------------- */
#mira {
  position: fixed; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; border: 4px solid rgba(255,255,255,.95); box-shadow: 0 0 0 3px rgba(22,100,192,.35), inset 0 0 0 3px rgba(22,100,192,.25);
  pointer-events: none; z-index: 4; opacity: 0; transition: opacity .2s, transform .12s, border-color .12s;
}
#mira i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px rgba(22,100,192,.5); }
#mira.on { opacity: .9; }
#mira.trava { transform: scale(1.25); border-color: #fff36b; }
#mira.trava i { background: #fff36b; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.redondo {
  pointer-events: auto; width: 58px; height: 58px; border-radius: 50%; font-size: 26px;
  background: rgba(255,255,255,.88); box-shadow: 0 4px 0 rgba(22,100,192,.35); color: var(--texto);
}
.redondo:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(22,100,192,.35); }
.redondo.pequeno { width: 56px; height: 56px; font-size: 22px; }
.botoes { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: calc(10px + env(safe-area-inset-right)); display: flex; gap: 8px; }

#tanque {
  position: absolute; left: calc(10px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top));
  width: 58px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
#tanque .vidro {
  position: relative; width: 44px; height: min(34vh, 230px); border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,.55); border: 4px solid #fff; box-shadow: 0 4px 0 rgba(22,100,192,.35), inset 0 0 0 2px rgba(58,160,255,.25);
}
#agua {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  background: linear-gradient(180deg, #7fe0ff, #2f8ff0); transition: height .25s linear;
}
#agua .onda { position: absolute; left: -20%; right: -20%; top: -7px; height: 14px; border-radius: 50%; background: #9aeaff; animation: onda 1.6s ease-in-out infinite; }
@keyframes onda { 50% { transform: translateX(8%) scaleY(.7); } }
.bolha { position: absolute; bottom: 6px; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.75); animation: bolha 2.4s linear infinite; }
.b1 { left: 8px; } .b2 { left: 20px; animation-delay: .8s; width: 6px; height: 6px; } .b3 { left: 28px; animation-delay: 1.6s; }
@keyframes bolha { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-190px); opacity: 0; } }
#tanque small { font-weight: 900; font-size: 13px; color: #fff; text-shadow: 0 2px 0 rgba(22,100,192,.55); letter-spacing: 1px; }
#tanque.baixo .vidro { border-color: #ffb23f; animation: alerta .7s ease-in-out infinite; }
@keyframes alerta { 50% { transform: scale(1.06); } }
#tanque.enchendo .vidro { border-color: #fff36b; box-shadow: 0 0 22px #fff36b, 0 4px 0 rgba(22,100,192,.35); }
#mais-agua {
  position: absolute; left: 50px; top: 40%; font-style: normal; font-weight: 900; font-size: 22px; color: #fff; white-space: nowrap;
  text-shadow: 0 2px 0 #1664c0, 0 0 10px rgba(22,100,192,.6); opacity: 0; pointer-events: none;
}
#mais-agua.on { animation: mais 1.4s ease-out; }
@keyframes mais { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 20% { opacity: 1; transform: translateY(0) scale(1.15); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }

/* pedido de letra */
#pedido {
  position: absolute; left: 50%; top: calc(10px + env(safe-area-inset-top)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 26px;
  background: rgba(255,255,255,.94); box-shadow: 0 5px 0 rgba(22,100,192,.35); max-width: calc(100vw - 150px); pointer-events: auto; cursor: pointer;
  animation: entra .45s cubic-bezier(.2,1.6,.4,1);
}
@keyframes entra { from { transform: translateX(-50%) scale(.3); opacity: 0; } }
#pedido .letra-grande {
  width: 66px; height: 66px; border-radius: 18px; display: grid; place-items: center; flex: none;
  font-family: var(--letra); font-weight: 900; font-size: 50px; line-height: 1; color: #fff;
  background: var(--azul); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18);
}
.pedido-texto { display: flex; flex-direction: column; min-width: 0; }
#pedido-frase { font-size: 22px; font-weight: 900; white-space: nowrap; }
#pedido-palavra { font-size: 16px; color: #45628f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pedido.certo { background: #eaffea; }
#pedido.certo .letra-grande { background: var(--verde); animation: pula .5s; }
#pedido.quase .letra-grande { animation: balanca .5s; }
@keyframes pula { 40% { transform: scale(1.3) rotate(-8deg); } }
@keyframes balanca { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
#mudo { position: absolute; left: 50%; transform: translateX(-50%); top: calc(100px + env(safe-area-inset-top)); background: rgba(27,42,74,.75); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 12px; max-width: min(70vw, 420px); text-align: center; }

#placar {
  position: absolute; left: calc(10px + env(safe-area-inset-left)); bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 60vw;
}
.molhou { background: rgba(255,255,255,.9); border-radius: 16px; padding: 4px 12px; font-size: 20px; box-shadow: 0 3px 0 rgba(22,100,192,.3); }
.molhou b { font-weight: 900; }
#colecao { display: flex; flex-wrap: wrap; gap: 4px; }
#colecao i {
  font-style: normal; font-family: var(--letra); font-weight: 900; font-size: 18px; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; color: #fff; background: var(--verde); box-shadow: 0 3px 0 rgba(0,0,0,.15); animation: entraLetra .5s cubic-bezier(.2,1.8,.4,1);
}
@keyframes entraLetra { from { transform: scale(0) rotate(-40deg); } }

/* rótulos que flutuam sobre os alvos */
#flutuantes { position: fixed; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; }
.balao-fala {
  position: absolute; transform: translate(-50%, -100%); background: #fff; color: var(--texto); font-weight: 900; font-size: 20px;
  padding: 6px 12px; border-radius: 16px; white-space: nowrap; box-shadow: 0 4px 0 rgba(22,100,192,.35);
}
.balao-fala b { font-family: var(--letra); font-size: 26px; color: #ff4d5e; }
.balao-fala::after { content: ""; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: #fff; }
.ponto { position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #1664c0, 0 0 6px rgba(0,0,0,.25); animation: sobe .9s ease-out forwards; white-space: nowrap; }
@keyframes sobe { to { transform: translate(-50%, -140%); opacity: 0; } }
#aviso { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 7; pointer-events: none; font-weight: 900; font-size: clamp(28px, 8vw, 54px); color: #fff; text-shadow: 0 4px 0 #1664c0, 0 0 18px rgba(22,100,192,.5); opacity: 0; white-space: nowrap; }
#aviso.on { animation: aviso 1.5s ease-out; }
@keyframes aviso { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }

/* ---------------- telas ---------------- */
.tela {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.25), rgba(22,100,192,.45));
}
.cartao {
  width: min(440px, 100%); max-height: 100%; overflow: auto; background: #fff; border-radius: 30px; padding: 22px 20px;
  text-align: center; box-shadow: 0 10px 0 rgba(22,100,192,.35), 0 20px 50px rgba(0,0,0,.2);
}
.selo { display: inline-block; font-size: 13px; font-weight: 900; letter-spacing: 2px; color: #fff; background: var(--azul); border-radius: 20px; padding: 5px 12px; }
h1 { font-family: var(--letra); font-size: clamp(38px, 11vw, 56px); line-height: .95; margin: 12px 0 10px; color: var(--azul-esc); }
h1 em { font-style: normal; color: #ff7ac8; }
h2 { font-family: var(--letra); font-size: 30px; margin: 8px 0; color: var(--azul-esc); }
.cartao p { font-size: 17px; line-height: 1.4; margin: 8px 0 16px; }
.grande {
  display: inline-flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 900; color: #fff; letter-spacing: 1px;
  background: linear-gradient(180deg, #ff9a2e, #ff6a3d); padding: 16px 34px; border-radius: 40px; box-shadow: 0 7px 0 #c9471f;
}
.grande:active { transform: translateY(4px); box-shadow: 0 3px 0 #c9471f; }
.secundario { display: block; margin: 14px auto 0; background: none; color: #45628f; font-size: 16px; text-decoration: underline; }
.dicas { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; font-size: 15px; color: #45628f; }
.dicas i { font-style: normal; margin-right: 6px; }
.sabe { margin-top: 12px; font-size: 14px; color: #45628f; }
.sabe b { font-family: var(--letra); letter-spacing: 2px; color: var(--verde); }
.icone { font-size: 46px; }
.contas { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; margin: 14px 0; }
.contas div { background: #eef7ff; border-radius: 16px; padding: 8px 4px; font-size: 14px; color: #45628f; }
.contas div b { display: block; font-size: 28px; color: var(--texto); }
.contas div span { font-size: 26px; display: block; }
.fim-letras { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 6px 0 4px; min-height: 10px; }
.fim-letras i { font-style: normal; font-family: var(--letra); font-size: 26px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--verde); box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.recorde { font-weight: 700; color: #ff6a3d; }

#carregando { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 14px; background: #7fd3ff; color: #fff; font-weight: 900; font-size: 20px; text-shadow: 0 2px 0 #1664c0; }
#carregando.fora { opacity: 0; pointer-events: none; transition: opacity .4s; }
.gota { width: 44px; height: 44px; background: #fff; border-radius: 0 50% 50% 50%; transform: rotate(45deg); animation: gota 1s ease-in-out infinite; }
@keyframes gota { 50% { transform: rotate(45deg) scale(.8); } }
#erro { position: fixed; inset: 0; z-index: 30; background: #7fd3ff; display: grid; place-content: center; text-align: center; padding: 24px; }

@media (max-width: 420px) {
  #pedido { max-width: none; left: calc(72px + env(safe-area-inset-left)); right: calc(72px + env(safe-area-inset-right)); transform: none; justify-content: center; padding-right: 12px; gap: 8px; animation-name: entraP; }
  @keyframes entraP { from { transform: scale(.3); opacity: 0; } }
  #pedido .letra-grande { width: 58px; height: 58px; font-size: 44px; }
  #pedido-frase { font-size: 19px; }
  #pedido-palavra { font-size: 14px; }
  .botoes { flex-direction: column; }
  .redondo { width: 56px; height: 56px; font-size: 24px; }
  #bt-repetir { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; } }

/* volume da voz, no menu de pausa */
.vol-voz { display: flex; align-items: center; gap: 10px; margin: 0 auto 16px; max-width: 320px; font-size: 15px; font-weight: 700; color: #45628f; }
.vol-voz span { white-space: nowrap; }
.vol-voz input { flex: 1; min-width: 0; height: 32px; accent-color: #3aa0ff; }
.vol-voz output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* ================= melhorias 10/10/2026 ================= */
/* escolher o parquinho (tema) */
.temas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.temas button {
  min-width: 56px; min-height: 56px; padding: 6px 12px; border-radius: 18px; font-size: 15px; font-weight: 800; color: var(--texto);
  background: #eef7ff; box-shadow: 0 4px 0 rgba(22,100,192,.25); display: inline-flex; align-items: center; gap: 6px;
}
.temas button span { font-size: 24px; }
.temas button[aria-pressed="true"] { background: #fff36b; box-shadow: 0 4px 0 #c9a21f, 0 0 0 3px #ffb23f inset; }
.temas button:disabled { opacity: .45; cursor: default; filter: grayscale(.8); }
.estrelas-total { margin-top: 10px; font-size: 15px; font-weight: 800; color: #c98a00; min-height: 1px; }
#bt-tutorial { min-height: 48px; }
/* pausa: opções */
.opcoes { display: flex; flex-direction: column; gap: 8px; margin: 0 auto 16px; max-width: 320px; }
.chip { min-height: 56px; border-radius: 18px; font-size: 16px; font-weight: 700; color: var(--texto); background: #eef7ff; box-shadow: 0 4px 0 rgba(22,100,192,.25); }
.chip[aria-pressed="true"] { background: #e6ffe9; }
/* fim: estrelas e parquinho novo */
.fim-estrelas { font-size: 46px; letter-spacing: 6px; margin: 6px 0 0; min-height: 56px; }
.fim-estrelas i { font-style: normal; display: inline-block; animation: estrela .55s cubic-bezier(.2,1.8,.4,1) both; }
.fim-estrelas i.apagada { filter: grayscale(1); opacity: .3; }
.fim-estrelas i:nth-child(2) { animation-delay: .25s; } .fim-estrelas i:nth-child(3) { animation-delay: .5s; }
@keyframes estrela { from { transform: scale(0) rotate(-90deg); } }
.fim-tema { font-weight: 900; font-size: 18px; color: #fff; background: linear-gradient(90deg, #9b6bff, #ff7ac8); border-radius: 16px; padding: 8px 10px; }
/* tutorial: um cartão só, embaixo, com a mãozinha */
#tutorial {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 8; pointer-events: none;
  display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.96); border-radius: 24px; padding: 10px 18px;
  box-shadow: 0 6px 0 rgba(22,100,192,.35); width: max-content; max-width: min(460px, calc(100vw - 32px)); animation: entraT .45s cubic-bezier(.2,1.6,.4,1);
}
@keyframes entraT { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
#tutorial b { font-size: 21px; line-height: 1.15; flex: 1 1 auto; min-width: 0; }
#tutorial .mao, #tutorial small { flex: none; }
#tutorial small { font-size: 13px; color: #45628f; white-space: nowrap; }
#tutorial .mao { font-size: 38px; animation: toque 1.1s ease-in-out infinite; }
@keyframes toque { 50% { transform: translateY(8px) scale(.9); } }
/* combo */
#combo { position: fixed; right: calc(14px + env(safe-area-inset-right)); top: 42%; z-index: 7; pointer-events: none; font-weight: 900; font-size: clamp(24px, 6vw, 38px);
  color: #fff36b; text-shadow: 0 3px 0 #c9471f, 0 0 12px rgba(201,71,31,.5); opacity: 0; }
#combo.on { animation: combo .9s ease-out; }
@keyframes combo { 0% { opacity: 0; transform: scale(.5) rotate(-10deg); } 20% { opacity: 1; transform: scale(1.2) rotate(4deg); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }
/* mira: pulso de acerto */
#mira.acertou { animation: miraOk .25s ease-out; }
@keyframes miraOk { 50% { box-shadow: 0 0 0 10px rgba(255,243,107,.6), inset 0 0 0 3px rgba(22,100,192,.25); } }
/* menos movimento (opção da pausa ou do aparelho) */
body.menos-mov *, body.menos-mov *::before, body.menos-mov *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
/* texto mais legível no HUD */
.molhou { font-size: 22px; }
#tanque small { font-size: 14px; }
@media (max-height: 460px) and (orientation: landscape) {
  .cartao { padding: 12px 16px; }
  h1 { font-size: 34px; margin: 4px 0; }
  .cartao p { margin: 4px 0 8px; font-size: 15px; }
  .dicas { display: none; }
  #tanque .vidro { height: 42vh; }
  #tutorial { bottom: 8px; padding: 6px 14px; }
  #tutorial b { font-size: 18px; }
}