/* Latte Lane styles, part 5 of 5. The parts load in order: a rule in a later part overrides the same rule in an earlier one. */
html body.from-coin #intro:not(.out) .intro-card u {
  animation-delay: 0.22s, 0.7s !important;
}
html body.from-coin #intro:not(.out) .intro-card .ic-panda {
  animation-delay: 0.24s !important;
}
html body :is(#map, #home, #cafe-screen).leaving {
  animation: scrLeave 160ms cubic-bezier(0.5, 0, 0.9, 0.5) both !important;
}
/* zoom da tela de saída: usa `scale` (o #map tem transform: none !important) e leva junto o fundo (a lousa é do body::after) */
@keyframes scrLeave2 {
  to {
    scale: 1.14;
    opacity: 0.55;
  }
}
@keyframes bgLeave {
  to {
    scale: 1.14;
  }
}
html body :is(#map, #home, #cafe-screen).leaving,
html body .screen.leaving:not(#panel) {
  animation: scrLeave2 160ms cubic-bezier(0.5, 0, 0.9, 0.5) both !important;
}
body.zooming::after,
body.zooming::before {
  transform-origin: var(--zx) var(--zy);
  animation: bgLeave 160ms cubic-bezier(0.5, 0, 0.9, 0.5) both !important;
}

html body #intro:not(.out) .intro-card u,
html body.from-coin #intro:not(.out) .intro-card u {
  display: block;
  animation: icPulse 0.9s ease-in-out 0.5s infinite !important;
}
@keyframes lvPress {
  0% {
    scale: 1;
    filter: brightness(1);
  }
  50% {
    scale: 1.22;
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 230, 140, 0.95));
  }
  100% {
    scale: 1.14;
    filter: brightness(1.2) drop-shadow(0 0 8px rgba(255, 230, 140, 0.8));
  }
}
html body #map .lv.pressed,
html body .btn.pressed {
  animation: lvPress 110ms cubic-bezier(0.3, 1.6, 0.5, 1) both !important;
  transform: none;
}
html body.from-coin #intro:not(.out) {
  animation: none !important;
}

html body #map .lv-grid.calm .lv:not(.unlock) {
  animation: none !important;
}
html body #map .lv-grid.calm .lv.cur::before {
  animation-play-state: paused;
}
@keyframes lvUnlock2 {
  0% {
    scale: 1;
    filter: grayscale(1) brightness(1);
  }
  35% {
    scale: 0.88;
    filter: grayscale(1) brightness(1.1);
  }
  60% {
    scale: 1.32;
    filter: grayscale(0) brightness(1.35) drop-shadow(0 0 14px rgba(255, 225, 120, 1));
  }
  80% {
    scale: 0.96;
  }
  100% {
    scale: 1;
    filter: none;
  }
}
@keyframes lvRing {
  0% {
    transform: scale(0.4);
    opacity: 0.95;
    border-width: 10px;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
    border-width: 1px;
  }
}
@keyframes lvSpark {
  0% {
    transform: scale(0.2) rotate(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: scale(1.5) rotate(40deg);
    opacity: 0;
  }
}
html body #map .lv.unlock {
  animation:
    lvUnlock2 0.62s cubic-bezier(0.3, 1.4, 0.5, 1) 0.65s both,
    lvPulse 1.4s ease-in-out 1.5s infinite !important;
}
html body #map .lv.unlock::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid #ffe7a0;
  pointer-events: none;
  animation: lvRing 0.55s ease-out 1.02s both;
  opacity: 0;
}
html body #map .lv.unlock b::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url(../assets/ui-brilhos.webp) center / contain no-repeat;
  pointer-events: none;
  animation: lvSpark 0.7s ease-out 1.02s both;
  opacity: 0;
}
html body #map .lv.unlock b {
  position: relative;
}
@keyframes panelLeave {
  to {
    scale: 0.9;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #map .lv.unlock,
  html body #map .lv.unlock::after,
  html body #map .lv.unlock b::after {
    animation: none !important;
  }
}
html body #map .lv.unlock {
  animation:
    lvUnlock2 0.62s cubic-bezier(0.3, 1.4, 0.5, 1) 0.35s both,
    lvPulse 1.4s ease-in-out 1.2s infinite !important;
}
html body #map .lv.unlock::after {
  animation-delay: 0.72s;
}
html body #map .lv.unlock b::after {
  animation-delay: 0.72s;
}
html body #map .lv.unlock {
  animation:
    lvUnlock2 0.62s cubic-bezier(0.3, 1.4, 0.5, 1) 0.15s both,
    lvPulse 1.4s ease-in-out 1s infinite !important;
}
html body #map .lv.unlock::after {
  animation-delay: 0.52s;
}
html body #map .lv.unlock b::after {
  animation-delay: 0.52s;
}

@keyframes panelLeave2 {
  to {
    translate: 0 70px;
    scale: 0.88;
    opacity: 0;
  }
}
@keyframes btnPress {
  0% {
    scale: 1;
  }
  40% {
    scale: 0.9 1.06;
    filter: brightness(1.25);
  }
  75% {
    scale: 1.08 0.96;
    filter: brightness(1.15);
  }
  100% {
    scale: 1;
    filter: none;
  }
}
html body .btn.pressed {
  animation: btnPress 120ms cubic-bezier(0.3, 1.5, 0.5, 1) both !important;
}
@keyframes rewardHop {
  40% {
    translate: 0 -10px;
  }
  100% {
    translate: 0 0;
  }
}
html body #panel.leaving :is(.stars, .earn) {
  animation: rewardHop 140ms ease-out both !important;
}
@keyframes mapRise {
  from {
    translate: 0 6vh;
  }
  70% {
    translate: 0 -0.6vh;
  }
  to {
    translate: 0 0;
  }
}
body.at-map.rising::after,
body.at-map.rising::before,
html body #map.rising {
  animation: mapRise 260ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both !important;
}
@keyframes lvUnlock3 {
  0% {
    scale: 1;
    rotate: 0deg;
  }
  10% {
    rotate: -9deg;
  }
  20% {
    rotate: 8deg;
  }
  30% {
    rotate: -6deg;
  }
  40% {
    rotate: 0deg;
    scale: 0.62;
  }
  70% {
    scale: 1.26;
    filter: brightness(1.35) drop-shadow(0 0 16px rgba(255, 225, 120, 1));
  }
  85% {
    scale: 0.96;
  }
  100% {
    scale: 1;
    filter: none;
  }
}
html body #map .lv.unlock {
  animation:
    lvUnlock3 0.7s cubic-bezier(0.3, 1.3, 0.5, 1) 0.12s both,
    lvPulse 1.4s ease-in-out 1s infinite !important;
}
html body #map .lv.unlock::after {
  animation-delay: 0.43s;
}
html body #map .lv.unlock b::after {
  animation-delay: 0.43s;
  width: 340%;
}

html body #panel.leaving .card {
  animation: panelLeave2 180ms cubic-bezier(0.5, 0, 0.9, 0.5) both !important;
}
@keyframes lvUnlock4 {
  0% {
    scale: 1;
    translate: 0 0;
  }
  8% {
    translate: -5px 0;
  }
  16% {
    translate: 5px 0;
  }
  24% {
    translate: -4px 0;
  }
  32% {
    translate: 3px 0;
  }
  38% {
    translate: 0 0;
    scale: 0.85;
  }
  68% {
    scale: 1.28;
    filter: brightness(1.35) drop-shadow(0 0 16px rgba(255, 225, 120, 1));
  }
  84% {
    scale: 0.96;
  }
  100% {
    scale: 1;
    filter: none;
  }
}
html body #map .lv.unlock {
  animation:
    lvUnlock4 0.62s cubic-bezier(0.3, 1.3, 0.5, 1) 0.08s both,
    lvPulse 1.4s ease-in-out 1s infinite !important;
}
html body #map .lv.unlock::after {
  animation-delay: 0.36s;
}
html body #map .lv.unlock b::after {
  animation-delay: 0.36s;
}
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-title {
    left: calc(var(--mx) + var(--mw) * 0.25) !important;
    width: calc(var(--mw) * 0.5) !important;
  }
}
html body #map .lv-title.long {
  font-size: calc(var(--mh) * 0.021) !important;
}
html body #map .lv-title.long small {
  font-size: 0.76em;
}
@media (min-aspect-ratio: 11/10) {
  html body #map .lv-title.long {
    font-size: calc(var(--sh) * 0.032) !important;
  }
}
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-title {
    left: calc(var(--mx) + var(--mw) * 0.3) !important;
    width: calc(var(--mw) * 0.4) !important;
  }
}
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-title {
    left: calc(var(--mx) + var(--mw) * 0.32) !important;
    width: calc(var(--mw) * 0.36) !important;
  }
}
html body #map .lv.unlock b::after {
  width: 170% !important;
} /* brilho preso no botão 4 (o de 340% vazava a moldura e cobria o 3) */
@keyframes mapRise2 {
  from {
    translate: 0 11vh;
    scale: 0.95;
  }
  65% {
    translate: 0 -1vh;
    scale: 1.01;
  }
  to {
    translate: 0 0;
    scale: 1;
  }
}
body.at-map.rising::after,
body.at-map.rising::before,
html body #map.rising {
  animation: mapRise2 380ms cubic-bezier(0.2, 0.9, 0.3, 1.15) 90ms both !important;
}
body.at-map.rising::before {
  animation: none !important;
} /* o fundo borrado fica parado e cobre o vão de cima enquanto a lousa sobe */

@keyframes markerHop {
  0% {
    translate: var(--hx, 0) var(--hy, 0);
  }
  50% {
    translate: calc(var(--hx, 0px) / 2) calc(var(--hy, 0px) / 2 - 34px);
  }
  85% {
    translate: 0 0;
    scale: 1.12 0.86;
  }
  100% {
    translate: 0 0;
    scale: 1;
  }
}
html body #map .lv.unlock::before {
  animation:
    markerHop 0.42s cubic-bezier(0.4, 0, 0.4, 1) 0.62s both,
    peekBob 2.4s ease-in-out 1.1s infinite !important;
  z-index: 3;
}
@keyframes pandaCheer {
  30% {
    translate: 0 -6%;
    rotate: -4deg;
  }
  60% {
    translate: 0 0;
    rotate: 3deg;
  }
  100% {
    rotate: 0deg;
  }
}
html body #map .lv-panda.cheer {
  animation: pandaCheer 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both !important;
}
#wipe {
  background: rgba(48, 26, 12, 0.5) !important;
}
html body #intro .intro-card u {
  font-size: 1.18em !important;
  padding: 0.55em 0 !important;
}
html body.from-coin #intro:not(.out) .ic-goal {
  animation: icPop 0.24s cubic-bezier(0.3, 1.5, 0.5, 1) 0.26s both !important;
}
html body.from-coin #intro:not(.out) .ic-goal:nth-child(2) {
  animation-delay: 0.32s !important;
}
html body.from-coin #intro:not(.out) .ic-goal:nth-child(3) {
  animation-delay: 0.38s !important;
}
html body #intro:not(.out) .intro-card u,
html body.from-coin #intro:not(.out) .intro-card u {
  animation: icPulse 1.2s ease-in-out 0.6s infinite !important;
}
@keyframes icPulse {
  50% {
    scale: 1.05;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #map .lv.unlock::before,
  html body #map .lv-panda.cheer {
    animation: none !important;
  }
}
html body.from-coin #intro:not(.out) .ic-goal {
  animation-delay: 0.15s !important;
}
html body.from-coin #intro:not(.out) .ic-goal:nth-child(2) {
  animation-delay: 0.2s !important;
}
html body.from-coin #intro:not(.out) .ic-goal:nth-child(3) {
  animation-delay: 0.25s !important;
}

#wipe {
  background: rgba(36, 20, 9, 0.6) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
}
html body #map .lv.unlock::before {
  animation:
    markerHop 0.4s cubic-bezier(0.4, 0, 0.4, 1) 0.42s both,
    peekBob 2.4s ease-in-out 0.9s infinite !important;
}
html body #intro:not(.out) .intro-card .ic-panda {
  top: -36% !important;
}

html body #map .lv.unlock.locked {
  background-image: url(../assets/ui-moeda-cadeado2.webp) !important;
}
html body #map .lv.unlock.locked b,
html body #map .lv.unlock.locked::before {
  opacity: 0;
}
@keyframes lvUnlock5 {
  0%,
  30% {
    scale: 1;
    rotate: 0deg;
  }
  38% {
    rotate: -7deg;
  }
  46% {
    rotate: 7deg;
  }
  54% {
    rotate: -6deg;
  }
  62% {
    rotate: 6deg;
    scale: 1;
  }
  70% {
    rotate: 0deg;
    scale: 0.7;
  }
  84% {
    scale: 1.25;
    filter: brightness(1.35) drop-shadow(0 0 16px rgba(255, 225, 120, 1));
  }
  93% {
    scale: 0.97;
  }
  100% {
    scale: 1;
    filter: none;
  }
}
html body #map .lv.unlock {
  animation:
    lvUnlock5 0.78s cubic-bezier(0.3, 1.2, 0.5, 1) 0.1s both,
    lvPulse 1.4s ease-in-out 1.4s infinite !important;
}
html body #map .lv.unlock::after {
  animation-delay: 0.7s;
}
html body #map .lv.unlock b::after {
  animation-delay: 0.7s;
}
html body #map .lv.unlock::before {
  animation:
    markerHop 0.38s cubic-bezier(0.4, 0, 0.4, 1) 0.82s both,
    peekBob 2.4s ease-in-out 1.3s infinite !important;
  z-index: 4;
}
@keyframes mapRise3 {
  from {
    scale: 1.09;
    translate: 0 2.5vh;
  }
  70% {
    scale: 0.995;
    translate: 0 0;
  }
  to {
    scale: 1;
    translate: 0 0;
  }
}
body.at-map.rising::after,
html body #map.rising {
  transform-origin: 50% 40%;
  animation: mapRise3 320ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both !important;
}
html body #panel.leaving .card {
  transform-origin: 50% 50% !important;
} /* cartão sai reto para baixo (saía na diagonal, puxado pela origem no botão) */
/* derrota gentil: o tabuleiro esmaece e o "Moves 0" pulsa antes do cartão; o cartão entra crescendo com o conteúdo */
#cv {
  transition: filter 0.3s ease-out;
}
body.over-dim #cv {
  filter: saturate(0.55) brightness(0.82);
}
@keyframes pulse0 {
  40% {
    scale: 1.12;
  }
  100% {
    scale: 1;
  }
}
#hud .box.mv.pulse0 {
  animation: pulse0 0.4s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
html body #panel:not([hidden]) .card.lose {
  animation: icCard 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
}
html body #panel:not([hidden]) .card.lose > :is(#panel-text, #more, #panel-btn) {
  animation: icPop 0.24s cubic-bezier(0.3, 1.5, 0.5, 1) both !important;
}
html body #panel:not([hidden]) .card.lose > #panel-text {
  animation-delay: 0.1s !important;
}
html body #panel:not([hidden]) .card.lose > #more {
  animation-delay: 0.16s !important;
}
html body #panel:not([hidden]) .card.lose > #panel-btn {
  animation-delay: 0.22s !important;
}
@media (prefers-reduced-motion: reduce) {
  body.over-dim #cv {
    transition: none;
  }
  html body #panel .card.lose,
  html body #panel .card.lose > * {
    animation: none !important;
  }
}

html body #panel .card.lose #panel-home {
  margin-top: 10px !important;
}
html body.from-coin #intro:not(.out) .ic-goal {
  animation-delay: 0.08s !important;
}
html body.from-coin #intro:not(.out) .ic-goal:nth-child(2) {
  animation-delay: 0.13s !important;
}
html body.from-coin #intro:not(.out) .ic-goal:nth-child(3) {
  animation-delay: 0.18s !important;
}
/* início → mapa (opus 6): o início cresce e some (sem véu); a fase atual ganha o clímax depois da cascata */
@keyframes homeLeave {
  to {
    scale: 1.06;
    opacity: 0;
  }
}
html body #home.leaving {
  animation: homeLeave 180ms ease-in both !important;
}
@keyframes lvCurIn {
  0% {
    scale: 0.6;
    opacity: 0;
  }
  55% {
    scale: 1.22;
    opacity: 1;
  }
  78% {
    scale: 0.95;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}
html body #map .lv-grid:not(.calm) .lv.cur:not(.unlock) {
  animation:
    lvCurIn 0.42s cubic-bezier(0.3, 1.4, 0.5, 1) 0.36s both,
    lvPulse 1.4s ease-in-out 1s infinite !important;
}
html body #map .lv-grid:not(.calm) .lv.lock {
  opacity: 0.88;
}
@media (prefers-reduced-motion: reduce) {
  html body #home.leaving,
  html body #map .lv.cur {
    animation: none !important;
  }
}

@keyframes chalkIn {
  from {
    opacity: 0;
  }
}
html body #map:not(.rising) .lv-chalk,
html body #map .lv-grid:not(.calm) ~ .lv-chalk {
  animation: chalkIn 0.25s ease-out 0.38s both;
}
html body #map .lv-grid:not(.calm) .lv.cur:not(.unlock) {
  animation:
    lvCurIn 0.44s cubic-bezier(0.3, 1.5, 0.5, 1) 0.04s both,
    lvPulse 1.4s ease-in-out 0.9s infinite !important;
}
@keyframes lvCurIn {
  0% {
    scale: 0.5;
    opacity: 0;
  }
  55% {
    scale: 1.3;
    opacity: 1;
  }
  78% {
    scale: 0.94;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}
/* explosão de doces (transição entre telas) */
#trans {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 60;
  pointer-events: none;
  display: none;
}
/* casinha (voltar ao início) no canto esquerdo da lousa, mesma linha e tamanho do som e ajustes */
#corner-l {
  position: fixed;
  top: max(10px, env(safe-area-inset-top), 1.8vmin);
  left: max(10px, env(safe-area-inset-left), 1.8vmin);
  z-index: 6;
  display: none;
}
body.at-map #corner-l {
  display: flex;
}
body:has(#pause:not([hidden])) #corner-l,
body.modal #corner-l {
  display: none !important;
}

html body #hud .box.mv small,
html body #hud .box.mv b {
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow:
    0 2px 0 #5a2f1c,
    0 -2px 0 #5a2f1c,
    2px 0 0 #5a2f1c,
    -2px 0 0 #5a2f1c,
    1.5px 1.5px 0 #5a2f1c,
    -1.5px 1.5px 0 #5a2f1c,
    1.5px -1.5px 0 #5a2f1c,
    -1.5px -1.5px 0 #5a2f1c,
    0 4px 0 rgba(90, 47, 28, 0.45) !important;
}
html body #hud .box.mv small {
  text-shadow:
    0 1.5px 0 #5a2f1c,
    0 -1.5px 0 #5a2f1c,
    1.5px 0 0 #5a2f1c,
    -1.5px 0 0 #5a2f1c,
    1px 1px 0 #5a2f1c,
    -1px 1px 0 #5a2f1c,
    1px -1px 0 #5a2f1c,
    -1px -1px 0 #5a2f1c !important;
}
html body #hud .box.mv.low b {
  color: #fff3c4 !important;
}
/* derrota: sem os tracinhos amarelos em cima da faixa; texto centrado na faixa rosa */
html body #panel .lose .pn-tq {
  display: none !important;
}
html body #panel .lose .ribbon svg {
  top: 3% !important;
}
/* baú: aberto do mesmo tamanho do fechado (a arte aberta tem moedas e brilhos em volta); abertura com raios, brilhos, pulo e moedas; selo verde */
#map .lv-chest .o {
  transform: scale(1.34);
  transform-origin: 50% 47%;
}
#map .lv-chest::before,
#map .lv-chest::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
#map .lv-chest::before {
  inset: -70%;
  background: url(../assets/ui-raios.webp) center / contain no-repeat;
  z-index: -1;
}
#map .lv-chest::after {
  inset: -45%;
  background: url(../assets/ui-brilhos.webp) center / contain no-repeat;
  z-index: 2;
}
#map .lv-chest.open::before {
  opacity: 0.55;
  animation: spin 14s linear infinite;
  inset: -45%;
}
@keyframes chestRays {
  0% {
    opacity: 0;
    scale: 0.3;
    rotate: 0deg;
  }
  30% {
    opacity: 1;
    scale: 1.15;
  }
  100% {
    opacity: 0.55;
    scale: 1;
    rotate: 60deg;
  }
}
@keyframes chestSpark {
  0% {
    opacity: 0;
    scale: 0.2;
  }
  30% {
    opacity: 1;
    scale: 1.1;
  }
  100% {
    opacity: 0;
    scale: 1.5;
  }
}
@keyframes chestPop {
  0% {
    scale: 1;
  }
  20% {
    scale: 0.82 1.1;
  }
  45% {
    scale: 1.28;
  }
  65% {
    scale: 0.94;
  }
  82% {
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}
#map .lv-chest.burst {
  animation: chestPop 0.7s cubic-bezier(0.3, 1.4, 0.5, 1) both !important;
  filter: drop-shadow(0 0 14px rgba(255, 214, 90, 1)) !important;
}
#map .lv-chest.burst::before {
  animation:
    chestRays 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) both,
    spin 14s linear 1.2s infinite;
  inset: -70%;
}
#map .lv-chest.burst::after {
  animation: chestSpark 0.9s ease-out both;
}
.chest-fly {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(58, 36, 22, 0.3));
}
html body #map .lv-chest.open b {
  background: linear-gradient(#9fdc5f, #5fae35) !important;
  border-color: #3f7a22 !important;
  color: #fff !important;
  padding: 0.05em 0.7em !important;
  text-shadow:
    0 1.5px 0 #2f5f18,
    0 -1.5px 0 #2f5f18,
    1.5px 0 0 #2f5f18,
    -1.5px 0 0 #2f5f18;
  box-shadow: 0 2px 0 rgba(47, 95, 24, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  #map .lv-chest.burst,
  #map .lv-chest::before,
  #map .lv-chest::after {
    animation: none !important;
  }
}

/* ===== tela final: venceu as 100 fases (só assets que já existiam) ===== */
#finale {
  z-index: 20;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  background: rgba(60, 30, 12, 0.25);
}
#finale[hidden] {
  display: none !important;
}
#finale .fn-raios {
  position: absolute;
  left: 50%;
  top: 42%;
  width: max(150vw, 150vh);
  translate: -50% -50%;
  opacity: 0.55;
  animation: spin 30s linear infinite;
  pointer-events: none;
}
#finale .fn-box {
  --u: min(92vw, 520px, 62vh);
  position: relative;
  width: var(--u);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #fff;
}
#finale .fn-rib {
  margin: 0;
  width: 100%;
  aspect-ratio: 3.2;
  display: grid;
  place-items: center;
  background: url(../assets/ui-faixa-rosa2.webp) center / contain no-repeat;
  font-size: calc(var(--u) * 0.1);
  font-weight: 900;
  animation: fnDrop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s both;
}
#finale .fn-rib span {
  translate: 0 -8%;
  text-shadow:
    0 3px 0 #3a2416,
    0 -3px 0 #3a2416,
    3px 0 0 #3a2416,
    -3px 0 0 #3a2416,
    2px 2px 0 #3a2416,
    -2px 2px 0 #3a2416,
    2px -2px 0 #3a2416,
    -2px -2px 0 #3a2416,
    0 6px 0 rgba(58, 36, 22, 0.4);
}
#finale .fn-hero {
  position: relative;
  width: 78%;
  aspect-ratio: 1.45;
  margin-top: calc(var(--u) * -0.02);
}
#finale .fn-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  translate: -50% -50%;
  animation: spin 18s linear infinite;
  opacity: 0.9;
}
#finale .fn-trofeu {
  position: absolute;
  left: 50%;
  top: 4%;
  width: 48%;
  translate: -50% 0;
  filter: drop-shadow(0 6px 0 rgba(58, 36, 22, 0.35));
  animation:
    fnPop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.35s both,
    fnBob 2.6s ease-in-out 1.2s infinite;
}
#finale .fn-panda {
  position: absolute;
  right: -6%;
  bottom: -6%;
  width: 44%;
  filter: drop-shadow(0 5px 0 rgba(58, 36, 22, 0.3));
  animation: fnPop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.6s both;
  transform-origin: 50% 100%;
}
#finale .fn-sp {
  position: absolute;
  width: 12%;
  animation: twinkle 1.3s ease-in-out infinite;
}
#finale .fn-sp.a {
  left: 12%;
  top: 8%;
}
#finale .fn-sp.b {
  left: 70%;
  top: 2%;
  animation-delay: 0.4s;
}
#finale .fn-sp.c {
  left: 22%;
  top: 62%;
  width: 9%;
  animation-delay: 0.8s;
}
#finale .fn-lead {
  margin: calc(var(--u) * 0.02) 0 0;
  font-size: calc(var(--u) * 0.066);
  font-weight: 900;
  animation: fnUp 0.4s ease-out 0.8s both;
  text-shadow:
    0 2px 0 #3a2416,
    0 -2px 0 #3a2416,
    2px 0 0 #3a2416,
    -2px 0 0 #3a2416,
    1.5px 1.5px 0 #3a2416,
    -1.5px 1.5px 0 #3a2416,
    1.5px -1.5px 0 #3a2416,
    -1.5px -1.5px 0 #3a2416;
}
#finale .fn-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 0.03);
  width: 92%;
  margin-top: calc(var(--u) * 0.04);
}
#finale .fn-stats div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--u) * 0.025) 0;
  border-radius: calc(var(--u) * 0.05);
  background: linear-gradient(#fffdf6, #fbefd9);
  border: 3px solid #6b3f2a;
  box-shadow:
    inset 0 0 0 3px #f4bd5f,
    0 5px 0 rgba(58, 36, 22, 0.3);
  color: #4a2814;
  animation: fnPop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
#finale .fn-stats div:nth-child(1) {
  animation-delay: 0.95s;
}
#finale .fn-stats div:nth-child(2) {
  animation-delay: 1.05s;
}
#finale .fn-stats div:nth-child(3) {
  animation-delay: 1.15s;
}
#finale .fn-stats img {
  height: calc(var(--u) * 0.1);
  width: auto;
}
#finale .fn-stats b {
  font-size: calc(var(--u) * 0.058);
  font-weight: 900;
  line-height: 1.1;
}
#finale .fn-stats small {
  font-size: calc(var(--u) * 0.034);
  font-weight: 800;
  opacity: 0.75;
}
#finale .fn-soon {
  margin: calc(var(--u) * 0.035) 0 0;
  font-size: calc(var(--u) * 0.045);
  font-weight: 800;
  animation: fnUp 0.4s ease-out 1.3s both;
  text-shadow:
    0 2px 0 #3a2416,
    0 -1px 0 #3a2416,
    1px 0 0 #3a2416,
    -1px 0 0 #3a2416;
}
#finale #fn-home {
  --bh: calc(var(--u) * 0.15);
  margin-top: calc(var(--u) * 0.04);
  width: 56%;
  height: var(--bh);
  font-size: calc(var(--u) * 0.075);
  padding: 0;
  animation:
    fnPop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 1.45s both,
    icPulse 1.2s ease-in-out 2.2s infinite;
}
#finale .fn-cf {
  position: absolute;
  top: -8%;
  pointer-events: none;
  animation: fnFall 3.5s linear infinite;
}
@keyframes fnFall {
  from {
    translate: 0 0;
    rotate: 0deg;
  }
  to {
    translate: 30px 115vh;
    rotate: 540deg;
  }
}
@keyframes fnDrop {
  from {
    translate: 0 -80px;
    scale: 0.6;
    opacity: 0;
  }
}
@keyframes fnPop {
  0% {
    scale: 0;
  }
  70% {
    scale: 1.15;
  }
  100% {
    scale: 1;
  }
}
@keyframes fnUp {
  from {
    translate: 0 16px;
    opacity: 0;
  }
}
@keyframes fnBob {
  50% {
    translate: -50% -5%;
  }
}
@media (min-aspect-ratio: 11/10) {
  #finale .fn-box {
    --u: min(70vh, 520px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #finale *,
  #finale .fn-cf {
    animation: none !important;
  }
}
#finale .fn-cf {
  z-index: 0;
}
#finale .fn-box {
  z-index: 1;
} /* confete atrás dos textos */

/* toque para começar */
#tapstart {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgba(255, 240, 215, 0.25), rgba(60, 30, 12, 0.55));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#tapstart .ts-logo {
  width: min(70vw, 52vh, 520px);
  filter: drop-shadow(0 8px 0 rgba(58, 36, 22, 0.3));
  animation: tsBob 2.4s ease-in-out infinite;
}
#tapstart .ts-txt {
  margin: 0;
  color: #fff;
  font-weight: 900;
  font-size: clamp(26px, 5vh, 48px);
  animation: icPulse 1.1s ease-in-out infinite;
  text-shadow:
    0 3px 0 #3a2416,
    0 -3px 0 #3a2416,
    3px 0 0 #3a2416,
    -3px 0 0 #3a2416,
    2px 2px 0 #3a2416,
    -2px 2px 0 #3a2416,
    2px -2px 0 #3a2416,
    -2px -2px 0 #3a2416,
    0 6px 0 rgba(58, 36, 22, 0.4);
}
#tapstart.out {
  animation: tsOut 0.4s cubic-bezier(0.5, 0, 0.9, 0.5) forwards;
  pointer-events: none;
}
#tapstart.out .ts-logo {
  animation: tsPop 0.4s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}
@keyframes tsBob {
  50% {
    translate: 0 -2.5%;
    rotate: -1.5deg;
  }
}
@keyframes tsPop {
  40% {
    scale: 1.12;
  }
  100% {
    scale: 1.3;
    opacity: 0;
  }
}
@keyframes tsOut {
  to {
    opacity: 0;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}
body.tap-wait #home > * {
  visibility: hidden;
}
body.tap-wait #home .home-panda {
  visibility: visible;
}
body.tap-wait #corner {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #tapstart *,
  #tapstart.out {
    animation: none !important;
  }
}

#finale .fn-hero {
  width: 70%;
  aspect-ratio: 1.05;
}
#finale .fn-campeao {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  translate: -50% 0;
  filter: drop-shadow(0 6px 0 rgba(58, 36, 22, 0.3));
  transform-origin: 50% 100%;
  animation:
    fnPop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 0.35s both,
    fnCheer 2.4s ease-in-out 1.2s infinite;
}
@keyframes fnCheer {
  50% {
    scale: 1.03 0.98;
    translate: -50% -2%;
  }
}

/* idiomas com rótulos longos: o rótulo da opção fica numa linha e encolhe a letra até caber (fitOpts no main.js) */
html body #pause .opt span[data-i18n] {
  white-space: nowrap !important;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
}
html body #pause .opt span[data-i18n] {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 0 !important;
  margin-right: 6px;
}
html body #pause .opt span[data-i18n] {
  flex: none !important;
  width: 50% !important;
  text-align: left !important;
  margin-right: 0;
}
html body #pause .opt.lang span[data-i18n] {
  width: 31% !important;
}

/* ===== QA 08/11 ===== */
/* textos que encolhem para caber (fitText): ficam numa linha */
#pause-resume,
#pause-quit,
#panel-btn,
#panel-home,
#fn-home,
#cafe-go,
#more em,
.intro-card u,
#panel .earn,
#cafe-text,
#fn-soon,
#finale .fn-lead {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: clip !important;
}
#more em,
#cafe-text {
  display: block;
  min-width: 0;
}
/* balão de dica: quebra em até 2 linhas em vez de estourar (baú, dicas longas) */
#tip {
  white-space: normal !important;
  text-align: center;
  max-width: 92vw;
  line-height: 1.15;
}
body:not(.at-map):not(.at-home) #tip {
  white-space: normal !important;
}
/* seletor de idioma mais largo: o nome do idioma inteiro */
html body #pause .opt.lang select {
  width: 46% !important;
  max-width: none !important;
  font-size: 0.85em;
}
html body #pause .opt.lang span[data-i18n] {
  width: 24% !important;
}
/* som: rótulo do volume mais curto que o slider */
html body #pause .opt.vol span[data-i18n] {
  width: 30% !important;
}
/* derrota: Home com respiro abaixo do Retry e alvo maior */
html body #panel .card.lose #panel-home {
  margin-top: 14px !important;
  min-height: 40px;
  padding: 8px 18px;
}
/* tela final cabe em telas baixas */
@media (min-aspect-ratio: 11/10) {
  #finale .fn-box {
    --u: min(44vh, 520px) !important;
  }
}
@media (max-height: 560px) {
  #finale .fn-box {
    --u: min(40vh, 300px) !important;
  }
  #finale .fn-soon {
    display: none;
  }
}
/* celular deitado: pausa/ajustes/som e derrota usam uma "coluna" própria, grande o bastante (antes ficavam com ~120 px) */
html.phone-land #pause {
  --ch: calc(100vh * 0.9 / 0.447);
  --cw: calc(var(--ch) * 9 / 16);
  --cy: calc((100vh - var(--ch) * 0.447) / 2 - var(--ch) * 0.388);
  --cx: calc((100vw - var(--cw) * 0.691) / 2 - var(--cw) * 0.154);
}
html.phone-land #panel:has(.card.lose) {
  --ch: calc(100vh * 0.86 / 0.61);
  --cw: calc(var(--ch) * 9 / 16);
  --cy: calc((100vh - var(--ch) * 0.61) / 2 - var(--ch) * 0.311 + var(--ch) * 0.04);
  --cx: calc((100vw - var(--cw) * 0.831) / 2 - var(--cw) * 0.085);
}

/* ===== tutorial guiado da fase 1 ===== */
#tut {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
#tut[hidden] {
  display: none;
}
#tut.tap {
  pointer-events: auto;
  cursor: pointer;
}
#tut .tut-hole {
  position: fixed;
  box-shadow: 0 0 0 200vmax rgba(34, 18, 8, 0.62);
  transition:
    left 0.38s cubic-bezier(0.3, 1.25, 0.5, 1),
    top 0.38s cubic-bezier(0.3, 1.25, 0.5, 1),
    width 0.38s cubic-bezier(0.3, 1.25, 0.5, 1),
    height 0.38s cubic-bezier(0.3, 1.25, 0.5, 1);
  animation: tutIn 0.3s ease-out both;
}
#tut .tut-hole::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 4px solid #ffd36b;
  box-shadow:
    0 0 18px 4px rgba(255, 211, 107, 0.85),
    inset 0 0 14px rgba(255, 236, 170, 0.7);
  animation: tutRing 1.1s ease-in-out infinite;
}
#tut .tut-hole.nudge {
  animation: tutNudge 0.35s ease-in-out;
}
#tut .tut-hand {
  position: fixed;
  z-index: 2;
  margin: 0;
  filter: drop-shadow(0 4px 0 rgba(58, 36, 22, 0.35));
  transform: translate(-8%, 26%);
  pointer-events: none;
} /* movimento: Web Animations em tutShow */
#tut .tut-hand[hidden] {
  display: none;
}
#tut .tut-bubble {
  position: fixed;
  z-index: 3;
  box-sizing: border-box;
  padding: 14px 18px 12px 64px;
  background: linear-gradient(#fffdf6, #fbefd9);
  border: 3px solid #6b3f2a;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 3px #f4bd5f,
    0 6px 0 rgba(58, 36, 22, 0.35);
  color: #4a2814;
}
#tut .tut-bubble.pop {
  animation: tutPop 0.42s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
#tut .tut-bubble p {
  margin: 0;
  font-weight: 900;
  font-size: clamp(15px, 2.2vh, 21px);
  line-height: 1.2;
}
#tut .tut-bubble small {
  display: block;
  margin-top: 4px;
  font-weight: 800;
  font-size: clamp(11px, 1.5vh, 14px);
  color: #b5651d;
  animation: icPulse 1.1s ease-in-out infinite;
}
#tut .tut-bubble small:empty {
  display: none;
}
#tut .tut-pp {
  position: absolute;
  left: 6px;
  bottom: 2px;
  width: 54px;
  animation: tutPeek 2.2s ease-in-out infinite;
}
#tut.out {
  animation: tutOut 0.3s ease-in forwards;
}
@keyframes tutIn {
  from {
    opacity: 0;
  }
}
@keyframes tutOut {
  to {
    opacity: 0;
  }
}
@keyframes tutRing {
  50% {
    scale: 1.04;
    opacity: 0.7;
  }
}
@keyframes tutNudge {
  25% {
    translate: -6px 0;
  }
  75% {
    translate: 6px 0;
  }
}
@keyframes tutDrag {
  0% {
    translate: var(--ax) var(--ay);
    scale: 1;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  22% {
    translate: var(--ax) var(--ay);
    scale: 0.86;
  }
  62% {
    translate: var(--bx) var(--by);
    scale: 0.86;
  }
  74% {
    translate: var(--bx) var(--by);
    scale: 1;
    opacity: 1;
  }
  100% {
    translate: var(--bx) var(--by);
    opacity: 0;
  }
}
@keyframes tutPop {
  0% {
    scale: 0.6;
    opacity: 0;
  }
  70% {
    scale: 1.05;
    opacity: 1;
  }
  100% {
    scale: 1;
  }
}
@keyframes tutPeek {
  50% {
    translate: 0 -4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tut *,
  #tut {
    animation: none !important;
    transition: none !important;
  }
}

#tut {
  transition: opacity 0.22s ease-out;
}
#tut.playing {
  opacity: 0;
  pointer-events: none !important;
} /* durante a jogada guiada: a combinação aparece sem o escurecido */

#tut .tut-hole {
  box-shadow: 0 0 0 200vmax rgba(26, 13, 5, 0.74) !important;
}
#tut .tut-cell {
  position: fixed;
  z-index: 1;
  box-sizing: border-box;
  border: 3px dashed rgba(255, 226, 140, 0.95);
  border-radius: 12px;
  background: rgba(255, 240, 190, 0.16);
  animation: tutCell 1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tutCell {
  50% {
    border-color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 240, 190, 0.3);
  }
}
#tut .tut-bubble p {
  font-size: clamp(17px, 2.6vh, 24px) !important;
}
#tut .tut-bubble small {
  font-size: clamp(13px, 1.8vh, 16px) !important;
}
#tut .tut-bubble {
  padding-left: 70px !important;
}
#tut .tut-pp {
  width: 60px !important;
}
#tut .tut-cell {
  border: 3px solid #fff3c4 !important;
  background: rgba(255, 240, 190, 0.12) !important;
  box-shadow: 0 0 12px 3px rgba(255, 214, 110, 0.85);
} /* as duas peças que trocam */

#tut .tut-hole {
  box-shadow: 0 0 0 200vmax rgba(22, 11, 4, 0.8) !important;
}
#tut .tut-cell.off {
  border: 0 !important;
  box-shadow: none !important;
  background: rgba(22, 11, 4, 0.8) !important;
  animation: none;
  border-radius: 6px;
  inset: auto;
}
#tut .tut-cell.swap {
  border: 5px solid #ffe27a !important;
  animation: tutSwapCell 0.8s ease-in-out infinite;
}
@keyframes tutSwapCell {
  50% {
    border-color: #fff;
    box-shadow: 0 0 16px 5px rgba(255, 214, 110, 1);
  }
}
#tut .tut-hand {
  transform: translate(22%, 40%) !important;
  opacity: 0.9;
}
#tut .tut-bubble::before {
  content: '';
  position: absolute;
  left: calc(var(--tail, 50%) - 12px);
  top: -15px;
  border: 12px solid transparent;
  border-top: 0;
  border-bottom: 15px solid #6b3f2a;
}
#tut .tut-bubble::after {
  content: '';
  position: absolute;
  left: calc(var(--tail, 50%) - 8px);
  top: -9px;
  border: 8px solid transparent;
  border-top: 0;
  border-bottom: 11px solid #fffdf6;
}
#tut .tut-bubble.up::before {
  top: auto;
  bottom: -15px;
  border-bottom: 0;
  border-top: 15px solid #6b3f2a;
}
#tut .tut-bubble.up::after {
  top: auto;
  bottom: -9px;
  border-bottom: 0;
  border-top: 11px solid #fbefd9;
}
#tut .tut-bubble p b {
  color: #e0702a;
  font-size: 1.15em;
}
#tut .tut-bubble small {
  font-size: clamp(14px, 2vh, 17px) !important;
}

#tut .tut-cell.off {
  background: rgba(22, 11, 4, 0.42) !important;
}
#tut .tut-cell.swap {
  border-width: 5px !important;
  box-shadow:
    0 0 18px 6px rgba(255, 214, 110, 0.95),
    inset 0 0 10px rgba(255, 240, 190, 0.8) !important;
}
#tut .tut-hand {
  transform: translate(6%, 18%) !important;
}
#tut .tut-bubble {
  padding: 16px 20px 14px 84px !important;
}
#tut .tut-bubble p {
  font-size: clamp(19px, 2.9vh, 27px) !important;
}
#tut .tut-pp {
  width: 76px !important;
  left: 4px !important;
}
#tut .tut-bubble small {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 18px;
  border-radius: 999px;
  background: linear-gradient(#ffb347, #f08a2a);
  border: 2.5px solid #6b3f2a;
  color: #fff !important;
  font-size: clamp(14px, 2vh, 18px) !important;
  text-shadow:
    0 1.5px 0 #6b3f2a,
    0 -1px 0 #6b3f2a,
    1px 0 0 #6b3f2a,
    -1px 0 0 #6b3f2a;
  box-shadow: 0 3px 0 rgba(58, 36, 22, 0.35);
}

/* fim do tutorial: faixa rosa grande */
#tut-done {
  position: fixed;
  z-index: 31;
  translate: -50% -50%;
  aspect-ratio: 3.2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: url(../assets/ui-faixa-rosa2.webp) center / contain no-repeat;
  color: #fff;
  text-align: center;
}
#tut-done.show {
  display: flex;
  animation: tutDone 1.9s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}
#tut-done b {
  font-size: clamp(30px, 6.5vh, 64px);
  font-weight: 900;
  line-height: 1;
  translate: 0 -10%;
  text-shadow:
    0 3px 0 #3a2416,
    0 -3px 0 #3a2416,
    3px 0 0 #3a2416,
    -3px 0 0 #3a2416,
    2px 2px 0 #3a2416,
    -2px 2px 0 #3a2416,
    2px -2px 0 #3a2416,
    -2px -2px 0 #3a2416,
    0 6px 0 rgba(58, 36, 22, 0.45);
}
#tut-done small {
  margin-top: 2px;
  font-size: clamp(13px, 2vh, 20px);
  font-weight: 900;
  translate: 0 -10%;
  text-shadow:
    0 2px 0 #3a2416,
    0 -1px 0 #3a2416,
    1.5px 0 0 #3a2416,
    -1.5px 0 0 #3a2416;
  white-space: nowrap;
}
@keyframes tutDone {
  0% {
    scale: 0.4;
    opacity: 0;
  }
  18% {
    scale: 1.12;
    opacity: 1;
  }
  28% {
    scale: 1;
  }
  82% {
    scale: 1;
    opacity: 1;
  }
  100% {
    scale: 0.9;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #tut-done.show {
    animation: none;
  }
}
#tut .tut-pp {
  display: none !important;
}
#tut .tut-bubble {
  padding: 14px 20px 14px 20px !important;
  text-align: center;
}
#tut-done small {
  font-size: clamp(17px, 3.4vh, 32px) !important;
} /* subtítulo legível (~55% do "Great!") */

#tut .tut-cell.swap {
  border: 0 !important;
  box-shadow: none !important;
  animation: tutSwapGlow 1s ease-in-out infinite !important;
  background: radial-gradient(
    closest-side,
    rgba(255, 240, 170, 0.38),
    rgba(255, 226, 140, 0.12) 70%,
    rgba(255, 226, 140, 0)
  ) !important;
}
@keyframes tutSwapGlow {
  50% {
    background-color: rgba(255, 240, 180, 0.12);
  }
}
#tut .tut-hand {
  transform: translate(-12%, -4%) !important;
}
#tut-done small:empty {
  display: none;
}
/* fim do tutorial: faixa reta (texto nivelado); a ui-faixa-rosa2 continua guardada */
#tut-done {
  background-image: url(../assets/ui-faixa-reta.webp) !important;
  aspect-ratio: 5.59 !important;
}
#tut-done b {
  translate: 0 -4% !important;
}
#cafe-screen .cs-top b {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
} /* nome comprido da loja encolhe (fitText) e não empurra o contador */

/* End of css/game-5.css */