/* ==========================================================================
   QUE LETRA COMEÇA? — v2 · direção de arte "Álbum de figurinhas no jardim"
   Céu menta, morros verde-água, figurinhas com borda branca e brilho
   holográfico, letras como balas de vidro coloridas.
   ========================================================================== */
:root { --ceu-1: #A9E7F2; --ceu-2: #F2FFF8; --papel-2: #DDF7EA; --primaria: #23B39A; --primaria-esc: #138470; }

/* ---------------- figurinha (componente) ---------------- */
.figurinha { position: relative; border-radius: 9% / 7.5%; padding: 6%; overflow: hidden;
  background: linear-gradient(160deg, #FFFFFF, #F4F1FF); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 2px 0 rgba(43,35,80,.08), var(--sombra-2); }
.fig-arte { position: absolute; inset: 6%; border-radius: 7% / 6%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #FFFFFF 0%, #EAF8FF 45%, #CDEBFA 100%);
  box-shadow: inset 0 0 0 2px rgba(120, 170, 220, .25), inset 0 -14px 24px rgba(80, 140, 200, .12); }
.fig-arte .figura { position: absolute; inset: 8% 8% 6%; width: 84%; height: 86%; overflow: visible; }
.fig-letra { position: absolute; left: 4%; top: 4%; width: 27%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  font-weight: 900; font-size: calc(var(--figtam, 260px) * .15); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2);
  background: radial-gradient(circle at 35% 30%, #FFB27A, #FF6E3A 60%, #D9481A); box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(0,0,0,.2); }
.fig-brilho { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.95) 45%, rgba(170, 220, 255, .8) 50%, rgba(255, 190, 240, .7) 55%, rgba(255,255,255,0) 70%);
  background-size: 260% 100%; }
.figurinha.ganha .fig-brilho, .pacote.cola .fig-brilho, .figurinha.pequena .fig-brilho, .figurinha.demo .fig-brilho { opacity: 1; animation: holo 3.2s ease-in-out infinite; }
@keyframes holo { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }

/* ---------------- menu ---------------- */
#menu { align-items: center; justify-content: center; }
.menu-caixa { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2vh, 20px); padding: 16px; }
.logo { display: flex; flex-direction: column; align-items: center; line-height: .95; text-align: center; }
.logo-1, .logo-2 { font-weight: 900; color: #fff; letter-spacing: .01em; }
.logo-1 { font-size: clamp(34px, 8vmin, 60px); text-shadow: 0 4px 0 #138470, 0 8px 14px rgba(0,0,0,.15); }
.logo-2 { font-size: clamp(42px, 10vmin, 76px); color: #FFE066; text-shadow: 0 4px 0 #D9881A, 0 8px 14px rgba(0,0,0,.15); transform: rotate(-3deg); }
.menu-demo { display: flex; align-items: flex-end; gap: 6px; }
.menu-lili { width: clamp(96px, 18vmin, 160px); aspect-ratio: 120 / 132; }
.figurinha.demo { --figtam: clamp(110px, 20vmin, 170px); width: var(--figtam); height: calc(var(--figtam) * 1.15); transform: rotate(6deg); animation: demo-balanca 3.4s ease-in-out infinite; }
@keyframes demo-balanca { 50% { transform: rotate(2deg) translateY(-6px); } }
.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 demo" "jogar demo" "hoje linha"; column-gap: 28px; row-gap: 12px; align-items: center; justify-items: center; }
  .logo { grid-area: logo; } .menu-demo { grid-area: demo; } #btJogar { grid-area: jogar; } #hoje-menu { grid-area: hoje; } .menu-linha { grid-area: linha; }
  .logo-1 { font-size: 34px; } .logo-2 { font-size: 44px; }
}

/* ---------------- palco ---------------- */
.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: 10px;
  padding: 0 max(14px, env(safe-area-inset-right)) max(12px, 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, .85fr) minmax(0, 1.15fr); gap: 18px; } }
.area-figura { position: relative; display: grid; place-items: center; min-height: 0; }
.area-resposta { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: clamp(10px, 2vh, 20px); min-height: 0; }

.pacote { width: var(--figtam); height: calc(var(--figtam) * 1.15); perspective: 900px; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.figurinha.grande { --figtam: inherit; width: 100%; height: 100%; cursor: pointer; animation: fig-flutua 3.6s ease-in-out infinite; will-change: transform; }
@keyframes fig-flutua { 50% { transform: translateY(-2.5%) rotate(-1.2deg); } }
.pacote.chega { animation: pacote-chega .8s cubic-bezier(.25, 1.4, .5, 1) both; }
@keyframes pacote-chega { 0% { transform: translateY(-40%) rotateY(180deg) scale(.5); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; } }
.pacote.cola .figurinha { animation: fig-cola .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fig-cola { 40% { transform: scale(1.1) rotate(4deg); } }
.pacote.sai { transform: translateY(20%) scale(.6); opacity: 0; }
.figurinha.voando { position: fixed; z-index: 45; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.figurinha.voando .figura > g, .figurinha.voando .fig-brilho { filter: none; animation: none; opacity: 0; }
.figurinha.voando .figura > g { opacity: 1; }
.bt-ouvir { position: absolute; z-index: 3; right: max(0px, calc(50% - var(--figtam, 260px) / 2 - 26px)); top: max(0px, calc(50% - var(--figtam, 260px) * .575 - 14px)); }
.lili-jogo { position: absolute; z-index: 3; pointer-events: none; width: clamp(70px, calc(var(--figtam, 260px) * .36), 130px); aspect-ratio: 120 / 132;
  left: max(-6px, calc(50% - var(--figtam, 260px) / 2 - 46px)); bottom: max(-4px, calc(50% - var(--figtam, 260px) * .575 - 10px)); }

/* letras-bala */
.opcoes { --tam: min(calc((100vw - 64px) / 3), 17vh, 150px); display: flex; gap: 14px; justify-content: center; }
.opcoes.quatro { --tam: min(calc((100vw - 76px) / 4), 15vh, 140px); gap: 12px; }
@media (orientation: landscape) {
  .opcoes { --tam: min(calc((57vw - 70px) / 3), 31vh, 150px); }
  .opcoes.quatro { --tam: min(calc((57vw - 80px) / 4), 29vh, 136px); }
}
.letra { position: relative; width: var(--tam); height: var(--tam); border-radius: 28%; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--c1), var(--c2) 55%, var(--c3));
  box-shadow: inset 0 5px 0 rgba(255,255,255,.55), inset 0 -7px 0 rgba(0,0,0,.15), 0 8px 0 var(--c3), 0 14px 22px rgba(30, 60, 60, .25);
  animation: letra-chega .55s cubic-bezier(.3, 1.6, .5, 1) both; transition: transform .15s, opacity .35s, filter .35s; }
.letra::before { content: ""; position: absolute; left: 12%; right: 12%; top: 6%; height: 36%; border-radius: 40% 40% 50% 50%; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.letra span { position: relative; font-size: calc(var(--tam) * .62); font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 4px 0 rgba(0,0,0,.18); }
.letra:active { transform: translateY(5px) scale(.97); }
.letra.cor0 { --c1: #FF9F8A; --c2: #FF5F6D; --c3: #C8364A; }
.letra.cor1 { --c1: #8FD3FF; --c2: #3B9CF0; --c3: #2068B8; }
.letra.cor2 { --c1: #FFD76E; --c2: #F6A821; --c3: #C27806; }
.letra.cor3 { --c1: #C9A8FF; --c2: #8C62F0; --c3: #5E3CC0; }
@keyframes letra-chega { from { transform: scale(.2) translateY(40px); opacity: 0; } }
.letra.balanca { animation: letra-balanca .45s ease; }
@keyframes letra-balanca { 20% { transform: translateX(-10px) rotate(-6deg); } 50% { transform: translateX(8px) rotate(5deg); } 80% { transform: translateX(-4px); } }
.letra.fora { opacity: .28; filter: grayscale(.8); transform: scale(.86); pointer-events: none; }
.letra.dica { animation: letra-dica 1s ease-in-out 3; }
@keyframes letra-dica { 50% { transform: translateY(-12px) scale(1.06); filter: brightness(1.12) drop-shadow(0 0 14px #FFE38A); } }
.letra.certa { --c1: #9BF0B8; --c2: #2FBF71; --c3: #1E8F52; transform: scale(1.12); box-shadow: inset 0 5px 0 rgba(255,255,255,.55), 0 8px 0 var(--c3), 0 0 0 5px #fff, 0 0 30px rgba(80, 230, 140, .9); }
.letra.apaga { opacity: .25; transform: scale(.85); }

/* mini-álbum */
.mini-album { width: min(100%, 560px); min-height: 76px; padding: 8px 12px 10px; border-radius: 22px; background: rgba(255,255,255,.78); box-shadow: var(--sombra-1);
  display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.mini-titulo { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--tinta-suave); }
.mini-titulo svg { width: 20px; height: 20px; color: #23B39A; }
.mini-grade { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; }
@media (orientation: portrait) and (max-width: 520px) { .mini-grade { grid-template-columns: repeat(9, 1fr); } }
.mini-casa { aspect-ratio: 1; border-radius: 7px; display: grid; place-items: center; font-size: clamp(11px, 2.4vmin, 16px); font-weight: 900;
  color: #A9C9C0; background: #EAF6F1; box-shadow: inset 0 1px 3px rgba(0,0,0,.08); max-height: 34px; }
.mini-casa.ganha { color: #fff; background: radial-gradient(circle at 35% 30%, #8EF0CF, #23B39A 60%, #138470); box-shadow: 0 2px 0 #0E6B5A; }
.mini-casa.carimbo { animation: carimbo .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes carimbo { 0% { transform: scale(2.2); } 60% { transform: scale(.85); } 100% { transform: scale(1); } }

/* ---------------- álbum (livro) ---------------- */
#album { flex-direction: column; }
.livro-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; }
.livro-titulo { font-size: clamp(26px, 5.5vmin, 42px); font-weight: 900; color: #fff; text-shadow: 0 3px 0 #138470, 0 6px 12px rgba(0,0,0,.15); text-align: center; }
.livro { --figtam: 104px; width: min(100%, 980px); display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; padding: 16px; border-radius: 26px;
  background: linear-gradient(180deg, #FFFDF6, #FFF3DC); box-shadow: inset 0 0 0 3px #fff, var(--sombra-2); }
.pagina-casa { aspect-ratio: 1 / 1.15; min-height: 100px; }
.pagina-casa.vazia { border-radius: 14px; border: 3px dashed #C9DED6; display: grid; place-items: center; background: rgba(230, 246, 240, .6); }
.pagina-casa.vazia span { font-size: 44px; font-weight: 900; color: #CFE3DC; }
.pagina-casa.ganha { padding: 0; }
.pagina-casa.toque { animation: fig-cola .6s ease; }

/* ---------------- fim ---------------- */
#fim { align-items: center; justify-content: center; }
.fim-caixa { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.6vh, 16px); padding: 16px; width: min(100%, 760px); }
.fim-lili { width: clamp(90px, 17vmin, 150px); aspect-ratio: 120 / 132; }
.fim-titulo { font-size: clamp(38px, 9vmin, 70px); font-weight: 900; color: #fff; text-shadow: 0 4px 0 #138470, 0 8px 0 rgba(0,0,0,.1), 0 0 30px rgba(120, 240, 200, .8);
  animation: titulo-entra .7s cubic-bezier(.3, 1.6, .5, 1) both; white-space: nowrap; }
@keyframes titulo-entra { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
.fim-sub { font-size: clamp(18px, 3.4vmin, 26px); color: var(--tinta); text-align: center; }
.fim-figs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.figurinha.pequena { --figtam: clamp(78px, 13vmin, 104px); width: var(--figtam); height: calc(var(--figtam) * 1.15); padding: 0; animation: fig-entra .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes fig-entra { from { transform: scale(0) rotate(-30deg); opacity: 0; } }
.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 sub" "figs figs" "hoje acoes"; column-gap: 20px; row-gap: 6px; justify-items: center; }
  .fim-lili { grid-area: lili; width: 96px; } .fim-titulo { grid-area: titulo; font-size: 40px; } .fim-sub { grid-area: sub; } .fim-figs { grid-area: figs; }
  #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; }
  .figurinha.pequena { --figtam: 76px; }
}
#btMusica.desligado { opacity: .45; }

/* 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; }
}