/* ==========================================================================
   MONTA A PALAVRA — v2 · direção de arte "Oficina ao entardecer"
   Céu pêssego, morros de terracota, figura num quadro com holofote,
   sílabas como blocos de brinquedo laqueados sobre um trilho de madeira.
   ========================================================================== */
:root { --ceu-1: #FFD7B0; --ceu-2: #FFF3E3; --papel-2: #FFE6C7; --primaria: #FF7A45; --primaria-esc: #D9531F; }

/* ---------------- menu ---------------- */
#menu { align-items: center; justify-content: center; }
.menu-caixa { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vh, 22px); padding: 16px; max-height: 100%; }
.logo { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; }
.logo-linha { display: flex; gap: 6px; }
.logo-linha b { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.45em; padding: 0 .25em; border-radius: .28em;
  font-size: clamp(34px, 8.4vmin, 64px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.18);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(0,0,0,.14), 0 6px 0 rgba(0,0,0,.18), var(--sombra-1);
  animation: logo-balanca 3s ease-in-out infinite; }
.logo-linha b:nth-child(1) { background: linear-gradient(#FF9F6E, #F2662E); transform: rotate(-4deg); }
.logo-linha b:nth-child(2) { background: linear-gradient(#7FD8FF, #2F9BE0); transform: rotate(3deg); animation-delay: -.6s; }
.logo-linha b:nth-child(3) { background: linear-gradient(#9AE68F, #3CB45A); transform: rotate(-2deg); animation-delay: -1.2s; }
.logo-linha + .logo-linha b:nth-child(1) { background: linear-gradient(#C3A6FF, #8058E8); }
.logo-linha + .logo-linha b:nth-child(2) { background: linear-gradient(#FFD86E, #F0A71A); }
@keyframes logo-balanca { 50% { translate: 0 -5px; } }
.logo-a { font-size: clamp(22px, 4.6vmin, 34px); color: var(--tinta-suave); font-weight: 900; }
.menu-lili { width: clamp(110px, 22vmin, 190px); aspect-ratio: 120 / 132; }
.menu-linha { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.menu-linha .n-botao { font-size: 20px; }
@media (orientation: landscape) and (max-height: 520px) {
  .menu-caixa { display: grid; grid-template-columns: auto auto; grid-template-areas: "logo lili" "jogar lili" "hoje linha"; column-gap: 28px; row-gap: 10px; align-items: center; justify-items: center; }
  .logo { grid-area: logo; } .menu-lili { grid-area: lili; width: clamp(110px, 34vh, 190px); }
  #btJogar { grid-area: jogar; } .n-hoje { grid-area: hoje; } .menu-linha { grid-area: linha; }
  .logo-linha b { font-size: clamp(26px, 8.5vh, 50px); }
}

/* ---------------- palco do jogo ---------------- */
#jogo { flex-direction: column; }
.palco { position: absolute; left: 0; right: 0; bottom: 0; top: calc(max(10px, env(safe-area-inset-top)) + 92px);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px;
  padding: 0 max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
@media (orientation: landscape) {
  .palco { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); gap: 18px; }
}
.area-figura { position: relative; display: grid; place-items: center; min-height: 0; }
.area-montagem { display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 0; }
@media (orientation: portrait) { .area-montagem { height: calc(var(--bloco, 96px) * 2 + 76px); } }

/* moldura com holofote (luz suave + vidro) */
.moldura { position: relative; width: var(--mold, 260px); height: var(--mold, 260px); border-radius: 30px;
  background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #FFF6E8 46%, #FBE3C6 100%);
  box-shadow: inset 0 0 0 6px rgba(255,255,255,.85), inset 0 -18px 30px rgba(214, 140, 80, .18), 0 0 0 3px rgba(217, 120, 60, .25), var(--sombra-2);
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .35s; }
.moldura::after { content: ""; position: absolute; inset: 6px; border-radius: 24px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%); }
.holofote { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: radial-gradient(ellipse 60% 40% at 50% 8%, rgba(255, 244, 200, .9), rgba(255, 244, 200, 0) 70%); }
.figura-caixa { position: absolute; inset: 8% 8% 18% 8%; display: grid; place-items: center; cursor: pointer; }
.figura-caixa .figura { width: 100%; height: 100%; overflow: visible; animation: figura-flutua 3.4s ease-in-out infinite; will-change: transform; }
@keyframes figura-flutua { 50% { transform: translateY(-3%) rotate(-1deg); } }
.moldura.entrando { animation: moldura-entra .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes moldura-entra { from { transform: scale(.4) rotate(-10deg); opacity: 0; } }
.moldura.saindo { transform: translateX(-30%) scale(.7) rotate(-8deg); opacity: 0; }
.moldura.viva .figura { animation: figura-viva .8s cubic-bezier(.3, 1.6, .5, 1) 2; }
@keyframes figura-viva { 0% { transform: scale(1); } 30% { transform: scale(1.18, .88); } 60% { transform: scale(.94, 1.08) translateY(-6%); } 100% { transform: scale(1); } }
.palavra-escrita { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-weight: 900; font-size: calc(var(--mold, 260px) * .13);
  letter-spacing: .04em; opacity: 0; transform: translateY(20%) scale(.8); transition: opacity .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.palavra-escrita.mostra { opacity: 1; transform: none; }
.palavra-escrita span { text-shadow: 0 2px 0 #fff, 0 3px 6px rgba(0,0,0,.15); }
.cor0 { --c1: #FF9F6E; --c2: #F2662E; --c3: #B8441A; color: #E2561F; }
.cor1 { --c1: #7FD8FF; --c2: #2F9BE0; --c3: #1C6FAA; color: #1F86CC; }
.cor2 { --c1: #9AE68F; --c2: #3CB45A; --c3: #24813C; color: #2F9C4B; }
.cor3 { --c1: #C3A6FF; --c2: #8058E8; --c3: #5835B5; color: #7046DD; }
.bt-ouvir { position: absolute; right: max(0px, calc(50% - var(--mold, 260px) / 2 - 22px)); top: max(0px, calc(50% - var(--mold, 260px) / 2 - 18px)); z-index: 3; }
.lili-jogo { position: absolute; width: clamp(70px, calc(var(--mold, 260px) * .34), 130px); aspect-ratio: 120 / 132;
  left: max(-6px, calc(50% - var(--mold, 260px) / 2 - 40px)); bottom: max(-4px, calc(50% - var(--mold, 260px) / 2 - 20px)); z-index: 3; pointer-events: none; }

/* trilho de madeira e espaços */
.trilho { position: relative; display: flex; justify-content: center; gap: 14px; padding: 12px 18px; margin: 0 auto; border-radius: 26px;
  background: linear-gradient(180deg, #C98B52 0%, #B0713C 55%, #8E5428 100%);
  box-shadow: inset 0 3px 0 rgba(255, 220, 170, .55), inset 0 -4px 0 rgba(0,0,0,.18), 0 8px 0 #6E3E1C, var(--sombra-1);
  transition: gap .45s cubic-bezier(.3, 1.5, .5, 1); }
.trilho::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 22px, rgba(90, 45, 10, .25) 22px 24px, rgba(255,255,255,0) 24px 51px); }
.trilho.unida { gap: 2px; }
.trilho.certo { box-shadow: inset 0 3px 0 rgba(255, 240, 200, .7), 0 8px 0 #6E3E1C, 0 0 0 4px #FFE38A, 0 0 34px rgba(255, 210, 80, .8); }
.slot { position: relative; width: var(--bloco, 96px); height: var(--bloco, 96px); border-radius: 22px;
  background: radial-gradient(circle at 50% 30%, #7A4523, #5A2F14); box-shadow: inset 0 6px 12px rgba(0,0,0,.45), 0 2px 0 rgba(255, 220, 170, .4);
  transition: box-shadow .2s, transform .2s; }
.slot::after { content: ""; position: absolute; inset: 18%; border: 3px dashed rgba(255, 220, 170, .35); border-radius: 14px; }
.slot.mira { box-shadow: inset 0 6px 12px rgba(0,0,0,.4), 0 0 0 4px #FFE38A, 0 0 24px rgba(255, 220, 90, .9); transform: scale(1.06); }
.slot.encaixou { animation: slot-pulso .35s ease; }
@keyframes slot-pulso { 50% { transform: scale(1.1); } }
.slot.dica { animation: slot-dica 1.2s ease-in-out 2; }
@keyframes slot-dica { 50% { box-shadow: inset 0 6px 12px rgba(0,0,0,.4), 0 0 0 5px #FFE38A, 0 0 30px rgba(255, 220, 90, 1); } }

.bancada { display: flex; justify-content: center; align-items: center; gap: 14px; min-height: calc(var(--bloco, 96px) + 24px);
  padding: 10px; border-radius: 26px; background: rgba(255, 255, 255, .38); box-shadow: inset 0 2px 6px rgba(120, 60, 20, .12); }
.casa { width: var(--bloco, 96px); height: var(--bloco, 96px); border-radius: 22px; background: rgba(160, 90, 40, .10); box-shadow: inset 0 3px 6px rgba(120, 60, 20, .12); }

/* blocos de sílaba (camada por cima de tudo, posicionados por transform) */
#camada-pecas { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.peca { position: absolute; left: 0; top: 0; width: var(--bloco, 96px); height: var(--bloco, 96px); border-radius: 22px; pointer-events: auto; cursor: grab;
  display: grid; place-items: center; touch-action: none; will-change: transform;
  background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.16), 0 7px 0 var(--c3), 0 12px 18px rgba(60, 30, 20, .28);
  transition: transform .42s cubic-bezier(.3, 1.35, .5, 1), box-shadow .2s, opacity .3s, filter .3s; }
.peca::before { content: ""; position: absolute; left: 10%; right: 10%; top: 6%; height: 34%; border-radius: 16px 16px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); pointer-events: none; }
.peca span { position: relative; font-size: calc(var(--bloco, 96px) * .42); font-weight: 900; color: #fff; letter-spacing: .01em;
  text-shadow: 0 3px 0 rgba(0,0,0,.2), 0 0 8px rgba(0,0,0,.08); }
.peca.sem-transicao { transition: none; }
.peca.arrastando { transition: box-shadow .2s; z-index: 10; cursor: grabbing;
  box-shadow: inset 0 5px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.16), 0 7px 0 var(--c3), 0 26px 34px rgba(60, 30, 20, .35); }
.peca.certa { box-shadow: inset 0 5px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.16), 0 7px 0 var(--c3), 0 0 0 4px #fff, 0 0 18px rgba(80, 220, 140, .9); cursor: default; }
.peca.balanca { animation: peca-balanca .5s ease; }
@keyframes peca-balanca { 20% { translate: -9px 0; } 40% { translate: 8px 0; } 60% { translate: -6px 0; } 80% { translate: 4px 0; } }
.peca.dica { animation: peca-dica 1s ease-in-out 3; }
@keyframes peca-dica { 50% { translate: 0 -12px; filter: brightness(1.15) drop-shadow(0 0 12px #FFE38A); } }
.peca.chegando { animation: peca-chega .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes peca-chega { from { translate: 0 -60px; opacity: 0; } }
.peca.pula { animation: peca-pula .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes peca-pula { 40% { translate: 0 -18px; } }
.peca.some { opacity: 0; pointer-events: none; }

.estrela-voa { position: fixed; z-index: 45; width: 54px; height: 54px; color: #FFC531; pointer-events: none; filter: drop-shadow(0 0 10px rgba(255, 200, 50, .9)) drop-shadow(0 2px 0 #C78400); }
.estrela-voa svg { width: 100%; height: 100%; }

/* ---------------- fim ---------------- */
#fim { align-items: center; justify-content: center; overflow-y: auto; }
.fim-caixa { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.8vh, 16px); padding: 16px; width: min(100%, 760px); }
.fim-lili { width: clamp(90px, 18vmin, 150px); aspect-ratio: 120 / 132; }
.fim-titulo { font-size: clamp(38px, 9vmin, 72px); font-weight: 900; color: #fff; letter-spacing: .03em;
  text-shadow: 0 4px 0 #D9531F, 0 8px 0 rgba(0,0,0,.12), 0 0 30px rgba(255, 180, 90, .8); animation: titulo-entra .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes titulo-entra { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
.fim-estrelas { display: flex; gap: 10px; }
.fim-estrelas span { width: clamp(54px, 11vmin, 86px); color: #FFC531; filter: drop-shadow(0 3px 0 #C78400) drop-shadow(0 0 14px rgba(255, 200, 60, .8)); animation: estrela-entra .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.fim-estrelas span:nth-child(2) { translate: 0 -12px; }
.fim-estrelas span svg { width: 100%; height: 100%; }
@keyframes estrela-entra { from { transform: scale(0) rotate(-180deg); opacity: 0; } }
.fim-desfile { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.desfile-item { width: clamp(76px, 13vmin, 104px); padding: 6px 4px 8px; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; align-items: center; gap: 2px; animation: estrela-entra .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.desfile-item .figura { width: 82%; aspect-ratio: 1; }
.desfile-item b { font-size: clamp(13px, 2.4vmin, 17px); font-weight: 900; }
.fim-acoes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
@media (orientation: landscape) and (max-height: 520px) {
  .fim-caixa { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "lili titulo" "lili estrelas" "desfile desfile" "hoje acoes"; column-gap: 20px; row-gap: 6px; }
  .fim-lili { grid-area: lili; } .fim-titulo { grid-area: titulo; } .fim-estrelas { grid-area: estrelas; } .fim-desfile { grid-area: desfile; }
  #hoje-fim { grid-area: hoje; } .fim-acoes { grid-area: acoes; }
  .fim-acoes { flex-wrap: nowrap; } .fim-acoes .n-botao.grande { font-size: 24px; min-height: 76px; padding: 0 .9em; }
  .fim-estrelas span { width: 46px; } .desfile-item { width: 76px; }
}

/* ---------------- coleção ---------------- */
#colecao { flex-direction: column; }
.col-caixa { position: absolute; inset: calc(max(10px, env(safe-area-inset-top)) + 92px) 0 0 0; overflow-y: auto; padding: 0 14px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.col-titulo { font-size: clamp(28px, 6vmin, 44px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 #D9531F, 0 6px 12px rgba(0,0,0,.15); }
.col-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; width: min(100%, 980px); }
.col-item { position: relative; min-height: 112px; border-radius: 18px; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: rgba(255,255,255,.92); box-shadow: var(--sombra-1); }
.col-item .figura { width: 74%; aspect-ratio: 1; }
.col-item b { font-size: 16px; font-weight: 900; }
.col-item i { position: absolute; top: 4px; right: 6px; min-width: 24px; height: 24px; border-radius: 12px; background: #FFC531; color: #6B4200; font-style: normal; font-size: 14px; display: grid; place-items: center; box-shadow: 0 2px 0 #C78400; }
.col-item.falta { background: rgba(255,255,255,.45); box-shadow: inset 0 2px 6px rgba(0,0,0,.08); }
.col-item.falta .figura { filter: brightness(0) opacity(.14); }
.col-item.falta b { color: var(--tinta-suave); opacity: .6; }
.col-item.toque { animation: figura-viva .6s ease; }

#btMusica.desligado { opacity: .45; }
.bt-caixa { font-size: 26px; font-weight: 900; color: var(--tinta); }

/* celular em pé: o botão grande ocupa a linha, os redondos ficam juntos embaixo */
@media (orientation: portrait) and (max-width: 560px) {
  .fim-acoes { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 14px; }
  #btDeNovo { grid-column: 1 / -1; justify-self: center; }
}