/* Vila do Noel 3D — interface sobre o palco three.js. Visual: botões redondos "de brinquedo" com degrau de sombra,
   cores puras, tipografia Fredoka/Nunito. Fontes OFL auto-hospedadas (licenças em /vila/fontes/). Sem recursos externos. */
@font-face { font-family: "Fredoka"; src: url("/vila/fontes/fredoka-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/vila/fontes/nunito.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --vermelho: #EC3B4F; --vermelho-esc: #B9223A; --verde: #22A867; --verde-esc: #137A4A; --dourado: #F5B400; --amarelo: #FFC93C;
  --azul: #3B86F7; --azul-esc: #1F5FC4; --noite: #22306B; --roxo: #9B4DDB; --roxo-esc: #6B2BA6; --rosa: #FF5C9A; --rosa-esc: #C93272;
  --laranja: #FF8A3D; --laranja-esc: #C85E17; --menta: #79DDB9; --gelo: #BFE6FF; --creme: #FFF6E5; --tinta: #23203A; --branco: #FFFFFF;
  --ceu1: #2BA4EC; --ceu2: #6FCBF6; --ceu3: #D3F0FF;
  --titulo: "Fredoka", system-ui, "Segoe UI", Roboto, sans-serif;
  --corpo: "Nunito", system-ui, "Segoe UI", Roboto, sans-serif;
  --sombra-degrau: 0 5px 0;
  --raio: 26px;
  --seguro-topo: env(safe-area-inset-top, 0px);
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100dvh; overflow: hidden; font: 400 1.125rem/1.45 var(--corpo); color: var(--tinta);
  background: linear-gradient(180deg, var(--ceu1) 0%, var(--ceu2) 42%, var(--ceu3) 78%) fixed;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--branco); font-weight: 800; }
.pular:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; box-shadow: 0 0 0 7px rgba(34, 48, 107, .85); border-radius: 14px; }
.semjs { position: fixed; inset: auto 16px 40% 16px; padding: 16px; border-radius: 20px; background: #fff; text-align: center; font-weight: 700; }

/* ---------------------------------------------------------------- palco 3D ---- */
.palco { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }

/* ---------------------------------------------------------------- topo ---- */
.topo { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  padding: calc(12px + var(--seguro-topo)) 14px 0; pointer-events: none; }
.topo > * { pointer-events: auto; }
.topo__esq, .topo__dir { display: flex; gap: 10px; align-items: center; }
.redondo { position: relative; display: inline-grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: var(--fundo, var(--vermelho)); box-shadow: var(--sombra-degrau) var(--degrau, var(--vermelho-esc)), 0 9px 14px rgba(20, 40, 90, .25);
  transition: transform .12s ease, box-shadow .12s ease; text-decoration: none; flex: none; }
.redondo svg { width: 27px; height: 27px; }
.redondo:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--degrau, var(--vermelho-esc)), 0 3px 6px rgba(20, 40, 90, .2); }
.redondo--vermelho { --fundo: var(--vermelho); --degrau: var(--vermelho-esc); }
.redondo--roxo { --fundo: var(--roxo); --degrau: var(--roxo-esc); }
.redondo--azul { --fundo: var(--azul); --degrau: var(--azul-esc); }
.redondo--verde { --fundo: var(--verde); --degrau: var(--verde-esc); }
.redondo--pequeno { width: 42px; height: 42px; }
.redondo--pequeno svg { width: 20px; height: 20px; }
.pilula-estrelas { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 16px 0 10px; border-radius: 999px; background: #fff;
  box-shadow: var(--sombra-degrau) #C9D7EE, 0 9px 14px rgba(20, 40, 90, .2); font: 600 1.35rem var(--titulo); color: var(--noite); text-decoration: none; }
.pilula-estrelas__icone svg { width: 30px; height: 30px; display: block; }
.selo-dias { margin: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; height: 58px; padding: 0 10px;
  border-radius: 14px; background: var(--vermelho); color: #fff; box-shadow: var(--sombra-degrau) var(--vermelho-esc), 0 9px 14px rgba(20, 40, 90, .25); line-height: 1; }
.selo-dias strong { font: 600 1.7rem var(--titulo); }
.selo-dias span { font: 800 .7rem var(--corpo); text-transform: uppercase; letter-spacing: .08em; }
.selo-dias .selo-dias__txt { font: 600 .95rem var(--titulo); text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------- mapa (Vila 3D) ---- */
.mapa { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.mapa[hidden] { display: none; }
.marca { position: absolute; left: 0; right: 0; top: calc(78px + var(--seguro-topo)); text-align: center; color: #fff; pointer-events: none; padding: 0 16px; }
.marca__titulo { margin: 0; font: 600 clamp(2.3rem, 7.5vw, 4rem)/1 var(--titulo); letter-spacing: .01em;
  text-shadow: 0 3px 0 #1C83C9, 0 6px 0 rgba(20, 90, 160, .45), 0 12px 24px rgba(10, 50, 110, .35); }
.marca__sub { margin: 8px 0 0; font: 700 clamp(.95rem, 2.6vw, 1.15rem) var(--corpo); text-shadow: 0 2px 6px rgba(10, 60, 120, .5); }
@media (min-width: 900px) { .marca { top: calc(22px + var(--seguro-topo)); } }

.placas { position: absolute; inset: 0; pointer-events: none; }
.placa { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 7px 14px 8px; min-width: 64px; min-height: 44px;
  border: 0; border-radius: 18px; background: #fff; color: var(--tinta); pointer-events: auto; will-change: transform;
  box-shadow: 0 4px 0 var(--degrau, #C9D7EE), 0 10px 18px rgba(20, 40, 90, .28); transition: opacity .25s ease, filter .2s ease; white-space: nowrap; }
.placa::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px; background: #fff; transform: rotate(45deg); border-radius: 3px; box-shadow: 4px 4px 0 var(--degrau, #C9D7EE); z-index: -1; }
.placa__nome { font: 600 1.02rem/1.15 var(--titulo); display: flex; align-items: center; gap: 7px; }
.placa__nome::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--cor, var(--vermelho)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.placa__dica { font: 800 .74rem/1.2 var(--corpo); color: #5B6787; text-transform: uppercase; letter-spacing: .05em; }
.placa--vermelho { --cor: var(--vermelho); } .placa--rosa { --cor: var(--rosa); } .placa--azul { --cor: var(--azul); } .placa--verde { --cor: var(--verde); }
.placa--amarelo { --cor: var(--amarelo); } .placa--roxo { --cor: var(--roxo); }
.placa--breve { background: #F1F5FC; }
.placa--breve .placa__dica { color: #B5520E; }
.placa:hover, .placa--foco { filter: brightness(1.04); z-index: 2; }
.placa--longe { opacity: 0; pointer-events: none; }
.placa--longe:focus-visible { opacity: 1; }
body.cartao-aberto .placa, body.cartao-aberto .marca, body.cartao-aberto .dica-girar { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
@media (max-width: 640px) {
  .placa { padding: 6px 11px 7px; border-radius: 15px; min-height: 40px; }
  .placa__nome { font-size: .9rem; }
  .placa__dica { display: none; }
  .placa--foco .placa__dica, .placa:focus-visible .placa__dica { display: block; }
}
.dica-girar { position: absolute; left: 50%; bottom: calc(70px + var(--seguro-baixo)); margin: 0; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px;
  background: rgba(34, 48, 107, .72); color: #fff; font: 700 .95rem var(--corpo); animation: some 7s ease forwards; white-space: nowrap; }
@keyframes some { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ---------------------------------------------------------------- cartão do lugar ---- */
.cartao { position: fixed; z-index: 40; left: 50%; bottom: calc(14px + var(--seguro-baixo)); width: min(420px, calc(100% - 24px)); padding: 54px 22px 22px;
  border-radius: 30px; background: #fff; text-align: center; transform: translate(-50%, 30px); opacity: 0; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), opacity .2s ease;
  box-shadow: 0 7px 0 #CFDBEF, 0 24px 50px rgba(15, 35, 90, .35); }
.cartao[hidden] { display: none; }
.cartao--aberto { transform: translate(-50%, 0); opacity: 1; }
.cartao::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 46px; border-radius: 30px 30px 0 0; background: var(--cor, var(--vermelho));
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .16) 0 12px, transparent 12px 24px); }
.cartao--vermelho { --cor: var(--vermelho); --cor-esc: var(--vermelho-esc); } .cartao--rosa { --cor: var(--rosa); --cor-esc: var(--rosa-esc); }
.cartao--azul { --cor: var(--azul); --cor-esc: var(--azul-esc); } .cartao--verde { --cor: var(--verde); --cor-esc: var(--verde-esc); }
.cartao--amarelo { --cor: var(--amarelo); --cor-esc: #C99000; } .cartao--roxo { --cor: var(--roxo); --cor-esc: var(--roxo-esc); }
.cartao__fechar { position: absolute; top: 8px; right: 10px; --fundo: rgba(0, 0, 0, .22); --degrau: rgba(0, 0, 0, .18); box-shadow: none; }
.cartao__retrato { position: absolute; left: 50%; top: -34px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%; background: #fff; padding: 5px; box-shadow: 0 6px 16px rgba(15, 35, 90, .25); }
.cartao__retrato svg { width: 100%; height: 100%; display: block; }
.cartao__titulo { margin: 8px 0 2px; font: 600 1.85rem/1.1 var(--titulo); color: var(--noite); }
.cartao__dica { margin: 0 0 16px; font-weight: 700; color: #5B6787; }
.cartao__breve { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 14px; border-radius: 18px; background: #FFF1E2; color: #9A4310; font: 600 1.1rem var(--titulo); }
.cartao__breve svg { width: 28px; height: 28px; }
.cartao__breve svg path:first-child { fill: var(--laranja); }
.botao-jogar { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 72px; border-radius: 999px; background: var(--cor, var(--verde)); color: #fff; text-decoration: none;
  font: 600 1.75rem var(--titulo); box-shadow: 0 7px 0 var(--cor-esc, var(--verde-esc)), 0 14px 22px rgba(15, 35, 90, .25); transition: transform .12s ease, box-shadow .12s ease; }
.botao-jogar:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--cor-esc, var(--verde-esc)); }
.botao-jogar__icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.botao-jogar__icone svg { width: 28px; height: 28px; }
.cartao--amarelo .botao-jogar { color: var(--tinta); }

/* ---------------------------------------------------------------- rodapé / cortina / carregando ---- */
.rodape { position: fixed; z-index: 25; left: 12px; bottom: calc(10px + var(--seguro-baixo)); }
.rodape__pais { min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .85); color: #34405F; font: 700 .9rem var(--corpo);
  box-shadow: 0 3px 0 rgba(30, 60, 120, .18); }
body.em-tela .rodape { display: none; }
.cortina { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: radial-gradient(circle at 50% 45%, #FFFFFF 0%, #E6F5FF 55%, #BFE6FF 100%); }
.cortina--fecha { opacity: 1; }
.carregando { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: linear-gradient(180deg, var(--ceu1), var(--ceu3)); }
.carregando[hidden] { display: none; }
.carregando__bolinhas { display: flex; gap: 10px; }
.carregando__bolinhas i { width: 18px; height: 18px; border-radius: 50%; background: var(--vermelho); animation: quica 1s ease-in-out infinite; box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.carregando__bolinhas i:nth-child(2) { background: var(--amarelo); animation-delay: .12s; }
.carregando__bolinhas i:nth-child(3) { background: var(--verde); animation-delay: .24s; }
.carregando__bolinhas i:nth-child(4) { background: #fff; animation-delay: .36s; }
@keyframes quica { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }

/* ---------------------------------------------------------------- telas (jogos e lugares) ---- */
.tela-host { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.tela-host[hidden] { display: none; }
.tela-host .tela { position: absolute; inset: 0; display: flex; flex-direction: column; }
.tela-host button, .tela-host a, .tela-host [tabindex], .tela-host .painel { pointer-events: auto; }
.tela__topo { display: flex; align-items: center; justify-content: center; gap: 10px; padding: calc(78px + var(--seguro-topo)) 14px 0; }
.tela__topo .voltar { position: fixed; z-index: 31; top: calc(12px + var(--seguro-topo)); left: 14px; }
.tela__titulo { margin: 0; padding: 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--noite); font: 600 clamp(1.15rem, 4vw, 1.6rem)/1.2 var(--titulo);
  box-shadow: 0 4px 0 rgba(30, 60, 120, .2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100vw - 40px); }
.tela__titulo:focus { outline: none; }
.tela__titulo:focus-visible { outline: 3px solid var(--dourado); }
body.em-tela .topo__esq { margin-left: 62px; }
@media (max-width: 480px) { body.em-tela .selo-dias { display: none; } }
.balao { position: relative; margin: 0; padding: 10px 16px; border-radius: 20px; background: #fff; color: var(--noite); font: 600 1.15rem/1.25 var(--titulo); box-shadow: 0 4px 0 rgba(30, 60, 120, .2), 0 10px 20px rgba(20, 40, 90, .18); }
.fala { position: absolute; left: 50%; top: calc(132px + var(--seguro-topo)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 28px); pointer-events: none; }
.fala__rosto { width: 56px; height: 56px; flex: none; border-radius: 50%; background: #fff; padding: 3px; box-shadow: 0 4px 10px rgba(20, 40, 90, .25); }
.fala__rosto svg { width: 100%; height: 100%; display: block; }
.fala .balao::before { content: ""; position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: #fff; transform: rotate(45deg); border-radius: 2px; }
.alvo-3d { position: absolute; left: 0; top: 0; border: 0; padding: 0; border-radius: 18px; background: transparent; touch-action: none; }
.alvo-3d:focus-visible { outline-offset: 0; }

/* barra inferior de escolhas (papéis, laços, tamanhos) */
.bandeja { position: absolute; left: 50%; bottom: calc(14px + var(--seguro-baixo)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(640px, calc(100% - 20px)); padding: 12px 12px 14px; border-radius: 28px; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 0 rgba(30, 60, 120, .16), 0 20px 40px rgba(15, 35, 90, .28); }
.bandeja[hidden] { display: none; }
.bandeja__rotulo { margin: 0; font: 600 1.1rem var(--titulo); color: var(--noite); }
.bandeja__itens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.amostra { width: 66px; height: 66px; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #eee; box-shadow: 0 5px 0 rgba(30, 60, 120, .22); transition: transform .12s ease; }
.amostra canvas, .amostra img { display: block; width: 100%; height: 100%; }
.amostra:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(30, 60, 120, .22); }
.amostra--laco { border-radius: 50%; display: grid; place-items: center; }
.amostra--laco svg { width: 44px; height: 44px; }
body.pequenos .amostra { width: 78px; height: 78px; }
.contador-presentes { display: flex; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 0 rgba(30, 60, 120, .18); }
.contador-presentes i { width: 18px; height: 18px; border-radius: 5px; background: #D6DEEC; }
.contador-presentes i.feito { background: var(--vermelho); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.puxar { display: inline-flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--vermelho); color: #fff; font: 600 1.5rem var(--titulo); box-shadow: 0 6px 0 var(--vermelho-esc); touch-action: none; }
.puxar__seta svg { width: 30px; height: 30px; display: block; transform: rotate(-90deg); }
.tela__topo .contador-presentes { flex: none; }
@media (max-width: 480px) { .tela--embrulhos .tela__topo { flex-wrap: wrap; } }

/* ---------------------------------------------------------------- botões e diálogos ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 26px; border: 0; border-radius: 999px; background: #fff; color: var(--noite);
  font: 600 1.3rem var(--titulo); text-decoration: none; box-shadow: 0 5px 0 #C9D7EE, 0 10px 18px rgba(20, 40, 90, .18); transition: transform .12s ease, box-shadow .12s ease; }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #C9D7EE; }
.btn--verde { background: var(--verde); color: #fff; box-shadow: 0 5px 0 var(--verde-esc), 0 10px 18px rgba(20, 40, 90, .2); }
.btn--verde:active { box-shadow: 0 1px 0 var(--verde-esc); }
.btn--claro { background: #F1F5FC; }
.btn--cinza { background: #4E5566; color: #fff; box-shadow: 0 5px 0 #2E333F; }
.btn--grande { min-height: 72px; font-size: 1.6rem; padding: 0 38px; }
.dialogo { width: min(92vw, 440px); max-height: 92dvh; overflow-x: hidden; padding: 26px 22px 24px; border: 0; border-radius: 30px; background: #fff; color: var(--tinta);
  box-shadow: 0 8px 0 #CFDBEF, 0 30px 60px rgba(10, 25, 70, .45); }
.dialogo::backdrop { background: rgba(18, 38, 92, .55); }
.dialogo h2 { margin: 0 0 10px; font: 600 1.9rem/1.15 var(--titulo); text-align: center; color: var(--noite); }
.dialogo[open] { animation: entra .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes entra { from { transform: translateY(24px) scale(.94); opacity: 0; } }
.recompensa { position: relative; text-align: center; }
.recompensa h2 { font-size: 2.2rem; }
.recompensa__estrelas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 4px 0 14px; }
.recompensa__estrelas span { display: block; animation: estrela-pula .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.recompensa__estrelas span:nth-child(2) { animation-delay: .1s; } .recompensa__estrelas span:nth-child(3) { animation-delay: .2s; }
.recompensa__estrelas span:nth-child(4) { animation-delay: .3s; } .recompensa__estrelas span:nth-child(5) { animation-delay: .4s; }
@keyframes estrela-pula { from { transform: scale(0) rotate(-40deg); } }
.recompensa__estrelas svg { width: clamp(58px, 16vw, 76px); height: clamp(58px, 16vw, 76px); display: block; filter: drop-shadow(0 4px 0 rgba(180, 110, 0, .35)); }
.recompensa__num { font: 600 1.8rem var(--titulo); }
.recompensa__adesivo-txt { margin: 0; font: 600 1.2rem var(--titulo); color: var(--verde-esc); }
.recompensa__adesivos { list-style: none; padding: 0; margin: 8px 0 14px; display: flex; justify-content: center; gap: 14px; }
.recompensa__adesivos li { display: flex; flex-direction: column; align-items: center; font-weight: 800; }
.recompensa__adesivos svg { width: 84px; height: 84px; }
.recompensa__botoes, .recado__botoes { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.confete { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.confete i { position: absolute; left: 50%; top: 40%; width: 10px; height: 14px; border-radius: 2px; will-change: transform, opacity; animation: confete 1.2s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes confete { from { transform: translate(-50%, -50%); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)); opacity: 0; } }
.confete-estrela { position: absolute; width: 28px; }
.confete-estrela:nth-child(1) { left: 6%; top: 8%; } .confete-estrela:nth-child(2) { right: 6%; top: 10%; } .confete-estrela:nth-child(3) { left: 12%; bottom: 10%; }
.confete-estrela:nth-child(4) { right: 12%; bottom: 8%; } .confete-estrela:nth-child(5) { left: 46%; top: 0; }

/* ajustes */
.ajustes { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.ajustes__rotulo, .ajustes__nota { margin: 0; }
.ajustes__nota { font-size: 1rem; color: #4F5B78; }
.ajustes__modos { display: flex; gap: 12px; justify-content: center; }
.modo { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; padding: 12px; border: 3px solid transparent; border-radius: 22px; background: #F1F5FC;
  font: 600 1.2rem var(--titulo); color: var(--noite); box-shadow: 0 4px 0 #D3DDEE; }
.modo svg { width: 64px; height: 64px; }
.modo[aria-pressed="true"] { border-color: var(--verde); background: #E3F7EC; box-shadow: 0 4px 0 var(--verde-esc); }
.apagar__aviso { min-height: 1.4em; margin: 0; font-weight: 700; color: #A11B2E; }

/* portão parental (visual sóbrio, de adulto) */
.dialogo--portao { background: #F1F2F4; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.dialogo--portao h2 { color: #2E333F; }
.portao { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.portao p { margin: 0; }
.segurar { position: relative; overflow: hidden; width: 100%; min-height: 76px; border: 0; border-radius: 18px; background: #4E5566; color: #fff; font: 600 1.4rem var(--titulo);
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; box-shadow: 0 5px 0 #2E333F; }
.segurar__barra { position: absolute; left: 0; bottom: 0; height: 10px; width: 100%; background: var(--dourado); transform: scaleX(0); transform-origin: 0 50%; }
.segurar.segurando .segurar__barra { transform: scaleX(1); transition: transform 3s linear; }
.portao__form { display: flex; flex-direction: column; gap: 6px; align-items: center; padding-top: 10px; border-top: 2px solid #D6D8DD; }
.portao__linha { display: flex; gap: 8px; }
.portao__campo { width: 110px; min-height: 56px; font: 700 1.4rem var(--corpo); text-align: center; border: 2px solid #8A909C; border-radius: 14px; }
.portao__erro { min-height: 1.4em; color: #A11B2E; font-weight: 700; }

/* sala de espera (faixa e recado) */
.faixa { position: fixed; z-index: 28; left: 50%; top: calc(76px + var(--seguro-topo)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  width: min(560px, calc(100% - 24px)); padding: 8px 14px; border-radius: 22px; background: #FFF4D6; box-shadow: 0 5px 0 #F0D79A, 0 14px 24px rgba(20, 40, 90, .2); }
.faixa[hidden] { display: none; }
.faixa__arte svg { width: 56px; height: 56px; display: block; }
.faixa__txt { margin: 0; font: 600 1.05rem/1.25 var(--titulo); color: var(--noite); }
.faixa__botao { flex: 1; min-height: 56px; border: 0; border-radius: 999px; background: var(--vermelho); color: #fff; font: 600 1.2rem var(--titulo); box-shadow: 0 5px 0 var(--vermelho-esc); }
body.em-tela .faixa, body.cartao-aberto .faixa { display: none; }
.dialogo--recado { background: var(--noite); color: #fff; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.recado__caixa { position: relative; }
.recado { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.recado h2 { color: var(--amarelo); }
.recado h2:focus { outline: none; box-shadow: none; }
.recado p { margin: 0; text-align: left; }
.recado a { color: var(--gelo); }
.recado__nota { font-size: 1rem; color: #B8C2E0; }
.recado__arte svg { width: 128px; height: 128px; }
.chuva { position: absolute; inset: -22px; pointer-events: none; }
.chuva__estrela { position: absolute; top: -12px; width: 9px; height: 9px; background: var(--amarelo); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: cair 4.5s linear infinite; }
.chuva__estrela--0 { left: 6%; } .chuva__estrela--1 { left: 18%; animation-delay: -1.2s; } .chuva__estrela--2 { left: 31%; animation-delay: -2.6s; }
.chuva__estrela--3 { left: 44%; animation-delay: -.6s; } .chuva__estrela--4 { left: 57%; animation-delay: -3.4s; } .chuva__estrela--5 { left: 70%; animation-delay: -1.8s; }
.chuva__estrela--6 { left: 82%; animation-delay: -4s; } .chuva__estrela--7 { left: 93%; animation-delay: -2.2s; }
@keyframes cair { to { transform: translateY(520px) rotate(180deg); } }

/* ---------------------------------------------------------------- mural e observatório ---- */
.painel { position: absolute; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); border-radius: 30px; background: rgba(255, 255, 255, .95);
  box-shadow: 0 7px 0 rgba(30, 60, 120, .16), 0 24px 50px rgba(15, 35, 90, .3); padding: 20px; }
.painel--baixo { bottom: calc(14px + var(--seguro-baixo)); max-height: calc(100dvh - 120px - var(--seguro-topo)); overflow: auto; }
.mural__estrelas { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 6px; font: 600 1.5rem var(--titulo); color: var(--noite); }
.mural__estrelas svg { width: 40px; height: 40px; display: block; }
.mural__sub { margin: 0 0 12px; text-align: center; font: 600 1.15rem var(--titulo); color: #5B6787; }
.mural__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.mural__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 22px; background: #F1F5FC; text-align: center; }
.mural__item .adesivo svg { width: 84px; height: 84px; display: block; }
.mural__item:not(.ganho) .adesivo { filter: grayscale(1) opacity(.35); }
.mural__nome { font: 600 1.05rem var(--titulo); color: var(--noite); }
.mural__dica { font-size: .9rem; color: #4F5B78; line-height: 1.25; }
.contagem { margin: 0; text-align: center; color: #fff; }
.contagem__linha { display: block; font: 600 1.6rem var(--titulo); }
.contagem__num { display: block; font: 600 clamp(5rem, 24vw, 9rem)/1 var(--titulo); color: var(--amarelo); text-shadow: 0 6px 0 #B97C00, 0 16px 34px rgba(0, 0, 0, .35); }
.contagem__num--txt { font-size: clamp(2.6rem, 11vw, 4.4rem); }
.contagem__sub { display: block; font: 700 1.2rem var(--corpo); color: #DCE6FF; }
.obs-centro { position: absolute; left: 0; right: 0; top: calc(128px + var(--seguro-topo)); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.curiosidade { display: flex; gap: 12px; align-items: center; }
.curiosidade__titulo { margin: 0; font: 600 1rem var(--titulo); color: #5B6787; text-transform: uppercase; letter-spacing: .06em; }
.curiosidade__txt { margin: 2px 0 0; font: 600 1.3rem/1.25 var(--titulo); color: var(--noite); }
.curiosidade .fala__rosto { width: 64px; height: 64px; }

body.ceu-noite { background: linear-gradient(180deg, #070D2E 0%, #16215A 45%, #2C3C86 100%) fixed; }
.contagem__dias { display: block; font: 600 1.6rem var(--titulo); margin-top: -6px; }
.fala--painel { position: static; transform: none; justify-content: center; margin: -54px auto 8px; max-width: 100%; }
.tela--mural .painel--baixo { padding-top: 26px; overflow: visible; }
.tela--mural .mural__lista { max-height: calc(100dvh - 380px); overflow: auto; padding: 4px; }

/* ---------------------------------------------------------------- memória ---- */
.escolha { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.escolha__rotulo { margin: 0; font: 600 1.15rem var(--titulo); color: var(--noite); }
.escolha__grupo, .escolha__tamanhos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.escolha__verso { width: 72px; height: 72px; padding: 4px; border: 3px solid transparent; border-radius: 18px; background: #F1F5FC; box-shadow: 0 4px 0 #D3DDEE; }
.escolha__verso[aria-pressed="true"] { border-color: var(--verde); }
.escolha__verso svg { width: 100%; height: 100%; display: block; }
.carta-alvo { border-radius: 14px; }

/* ---------------------------------------------------------------- movimento reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .dica-girar { display: none; }
  .carregando__bolinhas i { animation: none !important; }
  .chuva__estrela { animation: none !important; top: auto; }
  .chuva__estrela:nth-child(odd) { top: 10%; } .chuva__estrela:nth-child(even) { top: 60%; }
  .segurar.segurando .segurar__barra { transition-duration: 3s !important; }
}