/* Que Letra Começa? — criança de 5 anos, celular primeiro. */
:root{
  --fundo:#FFF3E4; --tinta:#3A2E22; --fraco:#8A7A66;
  --sol:#FFB703; --verde:#2FBF71; --rosa:#FF6BA9;
  --cartao:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--fundo);color:var(--tinta);
  font-family:'Segoe UI',ui-rounded,system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;
}
#hud{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 6px;
}
.placa{
  background:var(--cartao);border:3px solid #EDD9BE;border-radius:16px;
  padding:8px 16px;font-weight:800;font-size:clamp(18px,3.4vmin,26px);
}
.btn-redondo{
  width:clamp(64px,11vmin,88px);height:clamp(64px,11vmin,88px);border-radius:50%;
  font-size:clamp(30px,6vmin,44px);line-height:1;
  background:var(--cartao);border:3px solid #EDD9BE;cursor:pointer;
}
.btn-redondo:active{transform:scale(.93)}
#palco{
  position:relative;flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;
  padding:2px 12px calc(env(safe-area-inset-bottom,0px) + 12px);
}
/* Telas altas: centraliza na vertical (nas baixas mantém o topo + rolagem). */
@media (min-height:700px){#palco{justify-content:center}}
#figura{
  font-size:clamp(96px,20vmin,180px);line-height:1.2;background:var(--cartao);
  border:4px solid #EDD9BE;border-radius:28px;
  width:clamp(170px,34vmin,300px);height:clamp(150px,30vmin,260px);cursor:pointer;
}
#figura:active{transform:scale(.96)}
#pergunta{font-size:clamp(24px,4.8vmin,38px);font-weight:900;margin:8px 0 4px}
#opcoes{display:flex;gap:clamp(14px,3vmin,26px);margin:8px 0 6px}
.letra{
  width:clamp(96px,18vmin,150px);height:clamp(96px,18vmin,150px);border-radius:24px;
  font-size:clamp(56px,11vmin,96px);font-weight:900;
  background:var(--cartao);border:4px solid #EDD9BE;cursor:pointer;color:var(--tinta);
  box-shadow:0 5px 0 rgba(0,0,0,.10);
}
.letra:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.10)}
.letra.certa{border-color:var(--verde);background:#D9F7E7;animation:pulo .5s ease}
.letra.errada{border-color:var(--rosa);background:#FFE3EE;animation:treme .4s ease}
@keyframes pulo{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes treme{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#aviso{
  position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  background:rgba(58,46,34,.92);color:#fff;font-weight:900;
  font-size:clamp(26px,7vw,40px);border-radius:18px;padding:12px 26px;
  opacity:0;pointer-events:none;text-align:center;max-width:92vw;z-index:5;
}
#aviso.mostra{animation:sobe 1.4s ease forwards}
@keyframes sobe{
  0%{opacity:0;transform:translate(-50%,-40%) scale(.7)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  75%{opacity:1;transform:translate(-50%,-52%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-66%) scale(1)}
}
#album-wrap{width:100%;max-width:560px;margin-top:10px}
#album-wrap h2{font-size:16px;font-weight:900;color:var(--fraco);text-align:center;margin-bottom:6px}
#album{
  display:grid;grid-template-columns:repeat(9,1fr);gap:6px;
  background:var(--cartao);border:3px solid #EDD9BE;border-radius:18px;padding:10px;
}
.casa{
  aspect-ratio:1;border-radius:10px;background:#F5EBD9;color:#C9B895;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;
}
.casa.ganha{background:#D9F7E7;color:#0B6B3F;border:2px solid var(--verde)}
.casa.voa-alvo{outline:3px solid var(--sol)}
#voadora{
  position:fixed;z-index:50;font-size:56px;font-weight:900;pointer-events:none;
  transition:top .7s ease,left .7s ease,transform .7s ease;
}
.tela{
  position:fixed;inset:0;z-index:40;background:linear-gradient(180deg,#FFF3E4,#FFE0B8);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;transition:opacity .25s ease,visibility .25s;overflow-y:auto;
}
/* visibility:hidden tira a tela da árvore de acessibilidade: some o 2º
   botão "JOGAR" (o da tela de fim, escondida) — rev. 1, item 1. */
.tela.oculta{opacity:0;visibility:hidden;pointer-events:none}
.tela h1{
  font-size:clamp(1.7rem,9vw,2.8rem);font-weight:900;color:var(--rosa);
  text-shadow:0 4px 0 rgba(0,0,0,.06);margin-bottom:10px;
}
.tela p{color:var(--fraco);font-size:19px;line-height:1.6;margin-bottom:14px}
#demo{font-size:64px;margin-bottom:14px}
#demo b{color:var(--verde)}
.btn-grande{
  width:min(360px,90%);padding:22px;border:none;border-radius:22px;
  background:var(--verde);color:#06351F;font-size:26px;font-weight:900;
  cursor:pointer;box-shadow:0 6px 0 #1E8A52;min-height:72px;
}
.btn-grande:active{transform:translateY(4px);box-shadow:0 2px 0 #1E8A52}
#fim h1{color:var(--verde)}
#fim-estrelas{font-size:56px;margin:6px 0 18px}
@media (prefers-reduced-motion: reduce){
  .letra.certa,.letra.errada,#aviso.mostra{animation:none}
  #voadora{transition:none}
  #aviso.mostra{opacity:1}
  *{transition:none !important}
}