/* Traçar a Letra — criança de 5 anos, celular primeiro. */
:root{
  --fundo:#FFF6E8; --tinta:#3A2E22; --fraco:#8A7A66;
  --sol:#FFB703; --verde:#2FBF71; --rosa:#FF6BA9; --azul:#3D8BE8;
  --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 #EAD9BE;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 #EAD9BE;cursor:pointer;
}
.btn-redondo:active{transform:scale(.93)}
#palco{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
/* Cartão flutua sobre o topo: o canvas fica com o palco INTEIRO, então a
   letra cabe inteira e centrada em qualquer orientação (rev. 1, item 4). */
#cartao-letra{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vmin,16px);
  padding:6px 12px 14px;pointer-events:none;
  background:linear-gradient(180deg,var(--fundo) 55%,transparent);
}
#letra-grande{
  font-size:clamp(40px,9vmin,84px);font-weight:900;color:var(--rosa);
  text-shadow:0 3px 0 rgba(0,0,0,.08);line-height:1;
}
#palavra{font-size:clamp(17px,3.6vmin,28px);font-weight:800}
#palavra-emoji{font-size:clamp(26px,6vmin,52px)}
#papel{flex:1;min-height:0;width:100%;touch-action:none;display:block}
#aviso{
  position:absolute;left:50%;top:46%;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;
}
#aviso.mostra{animation:sobe 1.2s 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)}
}
#barra{
  display:flex;justify-content:center;gap:14px;
  padding:8px 12px calc(env(safe-area-inset-bottom,0px) + 12px);
}
.btn-nav{
  min-width:clamp(72px,14vmin,110px);height:clamp(64px,11vmin,88px);border-radius:18px;
  font-size:clamp(26px,5vmin,38px);font-weight:900;
  background:var(--cartao);border:3px solid #EAD9BE;cursor:pointer;color:var(--tinta);
}
.btn-nav:active{transform:translateY(3px)}
.tela{
  position:fixed;inset:0;z-index:40;background:linear-gradient(180deg,#FFF6E8,#FFE3B3);
  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(2rem,11vw,3.2rem);font-weight:900;color:var(--rosa);
  text-shadow:0 4px 0 rgba(0,0,0,.08);margin-bottom:10px;letter-spacing:.02em;
}
.tela p{color:var(--fraco);font-size:19px;line-height:1.6;margin-bottom:14px}
#demo{font-size:72px;animation:rabisco 2.2s ease-in-out infinite;margin-bottom:8px}
@keyframes rabisco{
  0%,100%{transform:translate(-18px,6px) rotate(-12deg)}
  50%{transform:translate(18px,-6px) rotate(12deg)}
}
.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;letter-spacing:.1em}
@media (prefers-reduced-motion: reduce){
  #demo{animation:none}
  #aviso.mostra{animation:none;opacity:1}
  *{transition:none !important}
}