/* Latte Lane styles, part 4 of 5. The parts load in order: a rule in a later part overrides the same rule in an earlier one. */
html body #panel .win .stars i.on:nth-child(2) {
  animation:
    starPop 0.65s var(--pop) both,
    starIdle 2.2s ease-in-out 0.75s infinite !important;
}
html body #panel .win .stars i.on:nth-child(3) {
  animation:
    starPop 0.6s var(--pop) both,
    starIdle 2.9s ease-in-out 0.7s infinite !important;
}
@keyframes starPop {
  0% {
    transform: scale(0) rotate(-30deg);
  }
  60% {
    transform: scale(1.35) rotate(8deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}
@keyframes starIdle {
  0%,
  100% {
    scale: 1;
    rotate: 0deg;
  }
  50% {
    scale: 1.07;
    rotate: 5deg;
  }
}
html body #panel .win .stars i.on::after {
  content: '';
  position: absolute;
  inset: -55%;
  background: url(../assets/ui-brilhos.webp) center / contain no-repeat;
  pointer-events: none;
  animation: starBurst 0.8s ease-out both;
}
@keyframes starBurst {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.5) rotate(40deg);
  }
}
html body #panel .win #panel-text {
  top: 33% !important;
}
html body #panel .win #panel-btn {
  top: 71% !important;
}
html body #panel .win #panel-home {
  top: 86.5% !important;
}
@media (prefers-reduced-motion: reduce) {
  #panel:not([hidden]) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html body #panel .win .stars i.on,
  html body #panel .win .stars i.on::after {
    animation: none !important;
  }
}
html body #panel .win #cafe-box {
  top: 49.5% !important;
  height: 19.5% !important;
}

body.at-cafe {
  --bgi: url(../assets/fundo-raios-retrato.webp) !important;
}
@media (min-aspect-ratio: 11/10) {
  body.at-cafe {
    --bgi: url(../assets/fundo-raios-paisagem.webp) !important;
    --gx: 0px;
    --gy: 0px;
    --gw: 100vw;
    --gh: 100vh;
  }
}
body.at-cafe::after {
  background-size: cover !important;
}
body.at-cafe #hud {
  display: none !important;
}
#cafe-screen .cf-tq,
#cafe-screen .cf-fl,
#cafe-screen .cf-folha,
#cafe-screen .cf-msp,
#cafe-screen .cf-psp,
#cafe-screen .cf-tq.p {
  display: none !important;
}
html body #cafe-screen > * {
  position: fixed !important;
  margin: 0 !important;
}
html body #cafe-screen .cf-raios {
  left: calc(var(--cx) - var(--cw) * 0.25);
  top: calc(var(--cy) + var(--ch) * 0.05);
  width: calc(var(--cw) * 1.5);
  aspect-ratio: 1;
  z-index: 0;
  opacity: 0.55;
  animation: spin 30s linear infinite;
  pointer-events: none;
}
html body #cafe-screen #cafe-title {
  left: calc(var(--cx) + var(--cw) * 0.1) !important;
  top: calc(var(--cy) + var(--ch) * 0.065) !important;
  width: calc(var(--cw) * 0.8) !important;
  z-index: 4 !important;
}
html body #cafe-screen .cafe-frame {
  left: calc(var(--cx) + var(--cw) * 0.121) !important;
  top: calc(var(--cy) + var(--ch) * 0.288) !important;
  width: calc(var(--cw) * 0.757) !important;
  height: calc(var(--ch) * 0.242) !important;
  z-index: 2;
  border: 0 !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: none !important;
  background: #3a2416;
}
html body #cafe-screen .cafe-frame canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
html body #cafe-screen .cf-moldura {
  left: calc(var(--cx) + var(--cw) * 0.04);
  top: calc(var(--cy) + var(--ch) * 0.2);
  width: calc(var(--cw) * 0.92);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 1vh 1vh rgba(58, 36, 22, 0.3));
  animation: itemIn 0.45s var(--pop) both;
}
html body #cafe-screen .cafe-foot {
  position: static !important;
}
html body #cafe-screen .cafe-panda {
  position: fixed !important;
  left: calc(var(--cx) + var(--cw) * 0.01) !important;
  top: calc(var(--cy) + var(--ch) * 0.6) !important;
  width: calc(var(--cw) * 0.42) !important;
  height: auto !important;
  z-index: 4;
  transform-origin: 50% 100%;
  animation: breathe 3s ease-in-out infinite !important;
}
html body #cafe-screen .cafe-prog {
  position: fixed !important;
  left: calc(var(--cx) + var(--cw) * 0.44) !important;
  top: calc(var(--cy) + var(--ch) * 0.655) !important;
  width: calc(var(--cw) * 0.52) !important;
  height: calc(var(--ch) * 0.14) !important;
  z-index: 4;
  display: flex !important;
  align-items: center;
  gap: 4%;
  padding: 0 5% !important;
  box-sizing: border-box;
  background: linear-gradient(#fffdf6, #fbefd9) !important;
  border: 4px solid #6b3f2a !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 0 0 4px #f4bd5f,
    0 6px 0 rgba(58, 36, 22, 0.3) !important;
}
html body #cafe-screen .cafe-prog::after {
  display: none !important;
}
html body #cafe-screen .cafe-prog > img:first-child {
  position: static !important;
  width: 26% !important;
  height: auto !important;
  transform: none !important;
}
html body #cafe-screen .cafe-prog > div {
  flex: 1;
  display: block !important;
  position: static !important;
  text-align: left;
}
html body #cafe-screen #cafe-count {
  font-size: calc(var(--ch) * 0.034);
  font-weight: 900;
  color: #4a2814;
  position: static !important;
}
html body #cafe-screen .cf-lbl {
  display: block;
  font-size: calc(var(--ch) * 0.016);
  font-weight: 800;
  color: #8a5a32;
  margin: 0 0 0.3em;
}
html body #cafe-screen .cafe-bar {
  position: static !important;
  width: 100% !important;
  height: calc(var(--ch) * 0.018) !important;
  border: 3px solid #6b3f2a !important;
  border-radius: 999px !important;
  background: #efe2cc !important;
  overflow: hidden;
}
html body #cafe-screen .cafe-bar b {
  display: block;
  height: 100%;
  background: linear-gradient(#a8e06a, #5fae35) !important;
  border-radius: 999px;
  transition: width 0.8s var(--out);
}
html body #cafe-screen .cf-dots {
  display: flex;
  gap: 5%;
  margin-top: 0.45em;
}
html body #cafe-screen .cf-dots i {
  width: calc(var(--ch) * 0.013);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e6d6bd;
  border: 2px solid #b08a60;
}
html body #cafe-screen .cf-dots i.on {
  background: #6bc040;
  border-color: #3f8a22;
}
html body #cafe-screen .cf-dots i.new {
  animation: dotPop 0.5s var(--pop) 0.9s both;
}
@keyframes dotPop {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
html body #cafe-screen #cafe-go {
  left: calc(var(--cx) + var(--cw) * 0.2) !important;
  top: calc(var(--cy) + var(--ch) * 0.87) !important;
  width: calc(var(--cw) * 0.6) !important;
  height: calc(var(--ch) * 0.078) !important;
  --bh: calc(var(--ch) * 0.078);
  font-size: calc(var(--ch) * 0.042) !important;
  z-index: 4;
}
html body #cafe-screen #cafe-go::before {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #cafe-screen .cf-raios,
  html body #cafe-screen .cafe-panda {
    animation: none !important;
  }
}
html body #cafe-screen #cafe-go::after {
  content: '' !important;
  font-size: 0 !important;
} /* tirava um emoji de matinho do botão */
html body #cafe-screen .cafe-prog > img:first-child {
  width: calc(var(--cw) * 0.13) !important;
  flex: 0 0 auto;
}
/* painel aberto: HUD e pausa ficam borrados atrás, nada compete com o painel */
html body.modal:not(.at-cafe) #hud,
html body.modal:not(.at-cafe) #menu {
  filter: blur(5px) brightness(0.72) !important;
}

#map .lv-shadow {
  display: none !important;
}
html body #map .lv-panda {
  top: auto !important;
  bottom: calc(var(--mh) * -0.05) !important;
  width: calc(var(--mw) * 0.38) !important;
  left: max(-4px, calc(var(--mx) + var(--mw) * 0)) !important;
  z-index: 2;
}
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-arrow {
    top: calc(var(--my) + var(--mh) * 0.6) !important;
  }
  html body #map .lv-arrow.prev {
    left: calc(var(--mx) + var(--mw) * 0.24) !important;
  }
  html body #map .lv-arrow.next {
    left: calc(var(--mx) + var(--mw) * 0.63) !important;
  }
}
@media (min-aspect-ratio: 11/10) {
  html body #map .lv-panda {
    width: calc(var(--sw) * 0.2) !important;
    left: calc(var(--sx) + var(--sw) * 0.01) !important;
    bottom: calc(var(--sh) * -0.08) !important;
  }
}
/* número das fases: contorno por sombras (o text-stroke riscava por dentro da letra na Fredoka) */
html body #map .lv b {
  -webkit-text-stroke: 0 !important;
  text-shadow:
    2px 0 0 #6b3a14,
    -2px 0 0 #6b3a14,
    0 2px 0 #6b3a14,
    0 -2px 0 #6b3a14,
    1.5px 1.5px 0 #6b3a14,
    -1.5px 1.5px 0 #6b3a14,
    1.5px -1.5px 0 #6b3a14,
    -1.5px -1.5px 0 #6b3a14,
    0 4px 0 rgba(58, 36, 22, 0.4) !important;
}
/* ===== melhorias de design, lote 1 (07/11) ===== */
/* 1. logo viva: respira devagar; pulinho ao tocar no Play */
html body #home .home-logo,
html body #map .map-logo {
  animation: logoBreath 3.4s ease-in-out infinite !important;
  transform-origin: 50% 70%;
}
@keyframes logoBreath {
  50% {
    scale: 1.035;
  }
}
html body #home .home-logo.pop {
  animation: logoPop 0.35s var(--pop) !important;
}
@keyframes logoPop {
  40% {
    scale: 1.12;
  }
}
/* 2. Play com reflexo de luz passando a cada 3,5 s */
html body #home #play {
  overflow: hidden;
  border-radius: 999px;
}
#play .shine {
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 22%;
  left: -40%;
  z-index: 1;
  pointer-events: none;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  animation: playShine 3.5s ease-in-out 1s infinite;
}
@keyframes playShine {
  0%,
  70% {
    left: -40%;
  }
  100% {
    left: 130%;
  }
}

html body #home .home-panda {
  pointer-events: auto !important;
  cursor: pointer;
}
html body #home .home-panda.hop {
  animation: pandaHop 0.5s var(--pop) !important;
}
@keyframes pandaHop {
  40% {
    transform: translateY(-9%) scale(0.97, 1.04);
  }
  70% {
    transform: translateY(0) scale(1.04, 0.96);
  }
}
/* 5. cartão do café no menu (logo abaixo das moedas) */
#home .home-cafe {
  position: fixed !important;
  z-index: 6;
  left: max(10px, env(safe-area-inset-left), 1.8vmin);
  top: calc(max(10px, env(safe-area-inset-top), 1.8vmin) + clamp(46px, 8vmin, 150px) + 10px);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: clamp(38px, 6.4vmin, 110px);
  padding: 0 1em 0 0.25em;
  border: 3px solid #6b3f2a;
  border-radius: 999px;
  background: #fff3df;
  box-shadow: 0 4px 0 rgba(58, 36, 22, 0.3);
  font: inherit;
  font-weight: 900;
  color: #4a2814;
  font-size: clamp(15px, 2.6vmin, 30px);
  cursor: pointer;
}
#home .home-cafe img {
  height: 115%;
  width: auto;
  margin: -8% 0;
}

#home .petals {
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
#home .petals i {
  position: absolute;
  top: -8%;
  width: clamp(14px, 2.6vmin, 36px);
  aspect-ratio: 1;
  background: url(../assets/ui-petala-1.webp) center / contain no-repeat;
  animation: petal 11s linear infinite;
  opacity: 0.9;
}
#home .petals i:nth-child(1) {
  left: 8%;
  animation-delay: 0s;
}
#home .petals i:nth-child(2) {
  left: 22%;
  animation-delay: -3s;
  background-image: url(../assets/ui-petala-2.webp);
  animation-duration: 13s;
}
#home .petals i:nth-child(3) {
  left: 37%;
  animation-delay: -7s;
  background-image: url(../assets/ui-petala-3.webp);
}
#home .petals i:nth-child(4) {
  left: 52%;
  animation-delay: -1.5s;
  background-image: url(../assets/ui-petala-5.webp);
  animation-duration: 14s;
}
#home .petals i:nth-child(5) {
  left: 66%;
  animation-delay: -9s;
  background-image: url(../assets/ui-petala-4.webp);
}
#home .petals i:nth-child(6) {
  left: 79%;
  animation-delay: -5s;
  background-image: url(../assets/ui-petala-2.webp);
  animation-duration: 12s;
}
#home .petals i:nth-child(7) {
  left: 90%;
  animation-delay: -11s;
  background-image: url(../assets/ui-petala-6.webp);
}
#home .petals i:nth-child(8) {
  left: 45%;
  animation-delay: -6s;
  animation-duration: 15s;
}
@keyframes petal {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  25% {
    transform: translate(4vmin, 28vh) rotate(90deg);
  }
  50% {
    transform: translate(-3vmin, 55vh) rotate(180deg);
  }
  75% {
    transform: translate(5vmin, 82vh) rotate(270deg);
  }
  100% {
    transform: translate(0, 112vh) rotate(360deg);
  }
}

#map .lv.cur::before {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 72%;
  aspect-ratio: 1.35;
  background: url(../assets/ui-panda-espiando.webp) center bottom / contain no-repeat;
  animation: peekBob 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes peekBob {
  50% {
    transform: translateY(-12%);
  }
}
/* 15. moves: cor esquenta aos poucos quando estão acabando (creme → laranja), nunca vermelho */
#hud .box.mv.mid {
  background: linear-gradient(#ffd9a8, #ffb870) !important;
}
#hud .box.mv.low {
  background: linear-gradient(#ffc98a, #ff9f4a) !important;
}
/* 21. transição entre telas: a tela nova entra com um fade e um leve zoom */
#home:not([hidden]),
#map:not([hidden]),
#cafe-screen:not([hidden]) {
  animation: screenIn 0.35s var(--out) both;
}
@keyframes screenIn {
  from {
    opacity: 0;
    scale: 0.98;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #home .home-logo,
  html body #map .map-logo,
  #play .shine,
  #home .petals,
  #map .lv.cur::before,
  #home:not([hidden]),
  #map:not([hidden]),
  #cafe-screen:not([hidden]) {
    animation: none !important;
  }
  #home .petals {
    display: none;
  }
}
#play .shine {
  left: 0 !important;
  animation-name: playShine2 !important;
}
@keyframes playShine2 {
  0%,
  70% {
    transform: translateX(-200%) skewX(-20deg);
  }
  100% {
    transform: translateX(560%) skewX(-20deg);
  }
}
@media (max-aspect-ratio: 11/10) {
  #home .home-cafe {
    top: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom), 1.8vmin) !important;
  }
}
html body #home #play {
  overflow: visible !important;
}
#play .shine-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}
@media (max-aspect-ratio: 11/10) {
  #home .home-cafe {
    height: 34px !important;
    font-size: 13px !important;
    padding: 0 0.8em 0 0.2em !important;
  }
}
/* ===== melhorias de design, lote 2: seleção de fases ===== */
/* 6. tema por página */
#map .lv-grid[data-theme='rosa'] .lv:not(.lock) {
  background-image: url(../assets/ui-moeda-rosa.webp);
}
#map .lv-grid[data-theme='menta'] .lv:not(.lock) {
  background-image: url(../assets/ui-moeda-menta.webp);
}
#map .lv-grid[data-theme='choco'] .lv:not(.lock) {
  background-image: url(../assets/ui-moeda-choco.webp);
}
/* 7. caminho de giz ligando as fases (atrás dos botões) */
#map .lv-chalk {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  transition: opacity 0.2s;
}
#map .lv-chalk path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 12;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.6));
}
#map .lv-chalk.wipe {
  opacity: 0;
}
/* 10. fase difícil: selo de chapéu de chef com chama */
#map .lv.hard::after {
  content: '';
  position: absolute;
  right: -10%;
  top: -18%;
  width: 42%;
  aspect-ratio: 1;
  background: url(../assets/ui-selo-dificil.webp) center / contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(58, 36, 22, 0.35));
}
#map .lv.hard.lock::after {
  filter: grayscale(0.6) opacity(0.8);
}
/* 11. troca de página: a lousa apaga e as fases entram uma a uma */
#map .lv:not(.cur):not(.unlock) {
  animation: lvIn 0.34s var(--pop) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes lvIn {
  from {
    opacity: 0;
    transform: scale(0.5) translateY(20%);
  }
}
#map .lv-grid.wipe .lv {
  animation: lvOut 0.2s ease-in both !important;
}
@keyframes lvOut {
  to {
    opacity: 0;
    transform: scale(0.7);
  }
}
/* 9. baú da página (canto de cima da lousa, ao lado do título) */
#map .lv-chest {
  position: fixed;
  z-index: 3;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  width: calc(var(--mw) * 0.14);
  aspect-ratio: 1.24;
  left: calc(var(--mx) + var(--mw) * 0.69);
  top: calc(var(--my) + var(--mh) * 0.148);
}
#map .lv-chest img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(58, 36, 22, 0.3));
}
#map .lv-chest .o,
#map .lv-chest.open .c {
  display: none;
}
#map .lv-chest.open .o {
  display: block;
}
#map .lv-chest.ready {
  animation: chestWiggle 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 214, 90, 0.95));
}
@keyframes chestWiggle {
  0%,
  60%,
  100% {
    rotate: 0deg;
  }
  70% {
    rotate: -8deg;
  }
  80% {
    rotate: 8deg;
  }
  90% {
    rotate: -4deg;
  }
}
#map .lv-chest b {
  position: absolute;
  left: 50%;
  bottom: -16%;
  transform: translateX(-50%);
  padding: 0.1em 0.55em;
  border-radius: 999px;
  background: #fff3df;
  border: 2px solid #6b3f2a;
  font-size: calc(var(--mh) * 0.014);
  font-weight: 900;
  color: #4a2814;
  white-space: nowrap;
}
@media (min-aspect-ratio: 11/10) {
  #map .lv-chest {
    width: calc(var(--sw) * 0.065);
    left: calc(var(--sx) + var(--sw) * 0.675);
    top: calc(var(--sy) + var(--sh) * 0.175);
  }
  #map .lv-chest b {
    font-size: calc(var(--sh) * 0.022);
  }
}
@media (prefers-reduced-motion: reduce) {
  #map .lv,
  #map .lv-chest.ready {
    animation: none !important;
  }
}
@media (min-aspect-ratio: 11/10) {
  html body #map .lv-title {
    left: calc(var(--sx) + var(--sw) * 0.36) !important;
    width: calc(var(--sw) * 0.28) !important;
  }
  #map .lv-chest {
    left: calc(var(--sx) + var(--sw) * 0.695) !important;
  }
}
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-title {
    left: calc(var(--mx) + var(--mw) * 0.22) !important;
    width: calc(var(--mw) * 0.45) !important;
  }
}
#map .lv-chalk path {
  stroke: #fffef6 !important;
  stroke-width: 7 !important;
  stroke-dasharray: 3 14 !important;
  filter: drop-shadow(0 0 2px rgba(60, 120, 80, 0.9)) drop-shadow(0 1px 0 rgba(60, 120, 80, 0.6)) !important;
}
/* 14. HUD: doce maior dentro das caixinhas das metas */
html body #hud .goal img {
  height: 62% !important;
}
/* 19. enfeites do café na partida (aparecem conforme as reformas); atrás do tabuleiro, só durante a partida */
#decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}
body:has(#hud:not([hidden])):not(.at-cafe) #decor {
  display: block;
}
#decor img {
  position: fixed;
  display: none;
  filter: drop-shadow(0 4px 3px rgba(58, 36, 22, 0.25));
}
#decor[data-n='1'] .d1,
#decor[data-n='2'] :is(.d1, .d2),
#decor[data-n='3'] :is(.d1, .d2, .d3),
#decor[data-n='4'] :is(.d1, .d2, .d3, .d4),
#decor[data-n='5'] :is(.d1, .d2, .d3, .d4, .d5),
#decor:is([data-n='6'], [data-n='7']) img {
  display: block;
}
#decor .d1 {
  left: calc(var(--sx) + var(--sw) * 0.02);
  top: calc(var(--sy) + var(--sh) * 0.005);
  width: calc(var(--sw) * 0.3);
}
#decor .d2 {
  left: calc(var(--sx) + var(--sw) * 0.68);
  top: calc(var(--sy) + var(--sh) * 0.005);
  width: calc(var(--sw) * 0.3);
}
#decor .d3 {
  left: calc(var(--sx) + var(--sw) * 0.01);
  top: calc(var(--sy) + var(--sh) * 0.1);
  width: calc(var(--sw) * 0.07);
  animation: sway 4s ease-in-out infinite;
  transform-origin: 50% 0;
}
#decor .d4 {
  left: calc(var(--sx) + var(--sw) * 0.88);
  top: calc(var(--sy) + var(--sh) * 0.74);
  width: calc(var(--sw) * 0.09);
}
#decor .d5 {
  left: calc(var(--sx) + var(--sw) * 0.12);
  top: calc(var(--sy) + var(--sh) * 0.36);
  width: calc(var(--sw) * 0.07);
}
#decor .d6 {
  left: calc(var(--sx) + var(--sw) * 0.88);
  top: calc(var(--sy) + var(--sh) * 0.34);
  width: calc(var(--sw) * 0.07);
}
@media (max-aspect-ratio: 11/10) {
  /* em pé só cabem as luzes, as bandeirinhas e o vaso (o tabuleiro ocupa o meio) */
  #decor .d1 {
    left: calc(var(--sx) - var(--sw) * 0.02);
    top: calc(var(--sy) + var(--sh) * 0);
    width: calc(var(--sw) * 0.5);
  }
  #decor .d2 {
    left: calc(var(--sx) + var(--sw) * 0.52);
    top: calc(var(--sy) + var(--sh) * 0);
    width: calc(var(--sw) * 0.5);
  }
  #decor .d3,
  #decor .d5,
  #decor .d6 {
    display: none !important;
  }
  #decor .d4 {
    left: calc(var(--sx) + var(--sw) * 0.82);
    top: calc(var(--syB) + var(--sh) * 0.88);
    width: calc(var(--sw) * 0.16);
  }
}
@media (prefers-reduced-motion: reduce) {
  #decor .d3 {
    animation: none;
  }
}
#decor .d6 {
  left: calc(var(--sx) + var(--sw) * 0.245) !important;
  top: calc(var(--sy) + var(--sh) * 0.27) !important;
  width: calc(var(--sw) * 0.055) !important;
}
/* 22. títulos de todas as faixas com o mesmo contorno grosso e a mesma sombra */
.ribbon svg text,
.cb-banner svg text,
.intro-card .ic-rib svg text,
#cafe-title svg text {
  stroke-width: 7px !important;
  stroke: #3a2416 !important;
  filter: drop-shadow(0 3px 0 rgba(58, 36, 22, 0.35));
  letter-spacing: 0.6px;
}

@media (min-aspect-ratio: 11/10) {
  html:not(.phone-land) body:not(.celebrating) #hud #panda {
    left: calc(var(--sx) + var(--sw) * 0.69) !important;
    top: calc(var(--sy) + var(--sh) * 0.4) !important;
    width: calc(var(--sw) * 0.14) !important;
    height: calc(var(--sw) * 0.16) !important;
  }
  html:not(.phone-land) #panda-tq {
    left: calc(var(--sx) + var(--sw) * 0.69) !important;
    top: calc(var(--sy) + var(--sh) * 0.38) !important;
  }
}

html.phone-land body #hud .hud-logo {
  left: calc(var(--sx) + var(--sw) * 0.6) !important;
  top: calc(var(--sy) + var(--sh) * 0.015) !important;
  width: calc(var(--sw) * 0.2) !important;
}
html.phone-land body #hud .bar {
  left: calc(var(--sx) + var(--sw) * 0.585) !important;
  top: calc(var(--sy) + var(--sh) * 0.24) !important;
  width: calc(var(--sw) * 0.23) !important;
  height: calc(var(--sh) * 0.5) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 40% 1fr;
  gap: 4% 5% !important;
  padding: 4% !important;
  box-sizing: border-box;
  align-items: stretch;
}
html.phone-land body #hud .bar .box {
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}
html.phone-land body #hud .bar .box small {
  font-size: calc(var(--sh) * 0.04) !important;
}
html.phone-land body #hud .bar .box b {
  font-size: calc(var(--sh) * 0.08) !important;
}
html.phone-land body #hud .goals {
  grid-column: 1 / 3;
  display: flex !important;
  flex-direction: column !important;
  gap: 6% !important;
  border-left: 0 !important;
  border-top: 3px solid #6b3f2a;
  padding: 4% 0 0 !important;
  height: auto !important;
}
html.phone-land body #hud .goal {
  flex: 1;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  flex-direction: row !important;
  justify-content: space-around !important;
  padding: 0 6% !important;
}
html.phone-land body #hud .goal img {
  height: 80% !important;
}
html.phone-land body #hud .goal span {
  font-size: calc(var(--sh) * 0.055) !important;
  margin: 0 !important;
}
html.phone-land body:not(.celebrating) #hud #panda {
  left: calc(var(--sx) + var(--sw) * 0.83) !important;
  top: calc(var(--sy) + var(--sh) * 0.3) !important;
  width: calc(var(--sw) * 0.15) !important;
  height: calc(var(--sw) * 0.172) !important;
}
html.phone-land body #panda-tq {
  display: none !important;
}
html.phone-land body #boosters {
  left: calc(var(--sx) + var(--sw) * 0.585) !important;
  top: calc(var(--sy) + var(--sh) * 0.77) !important;
  width: calc(var(--sw) * 0.2) !important;
}
html.phone-land body #tip {
  left: calc(var(--sx) + var(--sw) * 0.075) !important;
  width: calc(var(--sw) * 0.14) !important;
  top: calc(var(--sy) + var(--sh) * 0.5) !important;
  font-size: calc(var(--sh) * 0.032) !important;
  padding: 0.8em 0.6em !important;
}
/* celular deitado em px da tela (variáveis --pl-x/--pl-w/--pd-x do layout) */
html.phone-land body #hud .hud-logo {
  left: var(--pl-x) !important;
  width: var(--pl-w) !important;
  top: calc(var(--sy) + var(--sh) * 0.01) !important;
}
html.phone-land body #hud .bar {
  left: var(--pl-x) !important;
  width: var(--pl-w) !important;
  top: calc(var(--sy) + var(--sh) * 0.2) !important;
  height: calc(var(--sh) * 0.55) !important;
  grid-template-rows: 38% 1fr !important;
}
html.phone-land body #boosters {
  left: var(--pl-x) !important;
  width: var(--pl-w) !important;
  top: calc(var(--sy) + var(--sh) * 0.77) !important;
}
html.phone-land body:not(.celebrating) #hud #panda {
  left: var(--pd-x) !important;
  width: min(var(--pd-w), calc(var(--sh) * 0.5)) !important;
  height: auto !important;
  top: calc(var(--sy) + var(--sh) * 0.32) !important;
}
html.phone-land body #tip {
  left: calc(var(--pl-x) + var(--pl-w) * 0.02) !important;
  width: calc(var(--pl-w) * 0.96) !important;
  top: calc(var(--sy) + var(--sh) * 0.2) !important;
}

@media (min-aspect-ratio: 11/10) {
  html:not(.phone-land) body:not(.celebrating) #hud .bar {
    left: calc(var(--sx) + var(--sw) * 0.31) !important;
    width: calc(var(--sw) * 0.38) !important;
  }
}
html.phone-land body #hud .goals {
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden;
}
html.phone-land body #hud .goal {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}
html.phone-land body #hud .goal img {
  height: auto !important;
  max-height: 72% !important;
  width: auto !important;
  max-width: 40% !important;
}
html.phone-land body #hud .hud-logo {
  width: min(var(--pl-w), calc(100vw - var(--pl-x) - 128px)) !important;
}
html.phone-land body #hud .bar {
  height: auto !important;
  grid-template-rows: auto auto !important;
}
html.phone-land body #hud .bar .box {
  height: calc(var(--sh) * 0.19) !important;
}
html.phone-land body #hud .goals {
  height: auto !important;
  overflow: visible;
}
html.phone-land body #hud .goal {
  flex: 0 0 auto !important;
  height: calc(var(--sh) * 0.13) !important;
}
html.phone-land body #hud .goal img {
  max-height: 80% !important;
  max-width: 45% !important;
}
html.phone-land body .pause-btn {
  left: max(8px, env(safe-area-inset-left)) !important;
  top: max(8px, env(safe-area-inset-top)) !important;
  width: 44px !important;
  height: 44px !important;
}
html.phone-land body #boosters {
  top: calc(var(--sy) + var(--sh) * 0.815) !important;
}
html.phone-land body:not(.at-map):not(.at-home) #tip {
  left: var(--pl-x) !important;
  width: var(--pl-w) !important;
  min-width: 0 !important;
  top: calc(var(--sy) + var(--sh) * 0.2) !important;
  transform: none !important;
}
html.phone-land body #hud .bar .box {
  height: calc(var(--sh) * 0.17) !important;
}
html.phone-land body #hud .goal {
  height: calc(var(--sh) * 0.12) !important;
}
/* celular deitado: a dica ocupa o lugar da logo enquanto aparece (não cobre o painel nem o tabuleiro) */
html.phone-land body:not(.at-map):not(.at-home) #tip {
  top: calc(var(--sy) + var(--sh) * 0.02) !important;
  max-height: calc(var(--sh) * 0.16);
  overflow: hidden;
  font-size: calc(var(--sh) * 0.03) !important;
  padding: 0.5em 0.7em !important;
  line-height: 1.15;
}
html.phone-land body:has(#tip:not([hidden])) #hud .hud-logo {
  visibility: hidden;
}
html.phone-land body #boosters {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 4% !important;
}
html.phone-land body #boosters .boost {
  scale: 1 !important;
  width: calc(var(--sh) * 0.15) !important;
  height: calc(var(--sh) * 0.15) !important;
  flex: 0 0 auto;
}
html.phone-land body #boosters .boost-coins {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  font-size: calc(var(--sh) * 0.04) !important;
}
html.phone-land body #boosters {
  top: calc(var(--sy) + var(--sh) * 0.83) !important;
}

html body #map .lv-title {
  z-index: 4 !important;
  top: calc(var(--my) + var(--mh) * 0.165) !important;
}
html body #map .lv-grid {
  top: calc(var(--my) + var(--mh) * 0.262) !important;
}
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-arrow {
    top: calc(var(--my) + var(--mh) * 0.625) !important;
  }
}
@media (min-aspect-ratio: 11/10) {
  html body #map .lv-title {
    top: calc(var(--sy) + var(--sh) * 0.182) !important;
  }
  html body #map .lv-grid {
    top: calc(var(--sy) + var(--sh) * 0.295) !important;
  }
}

/* letras das faixas não encavalam: contorno mais fino e mais espaço entre letras */
.ribbon svg text,
.cb-banner svg text,
.intro-card .ic-rib svg text,
#cafe-title svg text {
  stroke-width: 4.5px !important;
  letter-spacing: 2px !important;
}
/* título da lousa abaixo da logo (celular/tablet) */
@media (max-aspect-ratio: 11/10) {
  html body #map .map-logo {
    width: calc(var(--mw) * 0.3) !important;
    left: calc(var(--mx) + var(--mw) * 0.35) !important;
  }
  html body #map .lv-title {
    top: calc(var(--my) + var(--mh) * 0.178) !important;
  }
}

@media (min-aspect-ratio: 11/10) {
  html:not(.phone-land) body:not(.celebrating) #hud #panda {
    top: calc(var(--sy) + var(--sh) * 0.58) !important;
  }
  html:not(.phone-land) #panda-tq {
    top: calc(var(--sy) + var(--sh) * 0.56) !important;
  }
}

html body #cafe-screen .cafe-prog {
  justify-content: flex-start !important;
  padding: 0 5% 0 4% !important;
  gap: 5% !important;
}
html body #cafe-screen .cafe-prog > div {
  flex: 1 1 auto !important;
}
html body #cafe-screen .cf-lbl {
  display: inline !important;
  margin-left: 0.3em !important;
}
html body #cafe-screen .cafe-panda {
  left: calc(var(--cx) - var(--cw) * 0.03) !important;
}
html body #cafe-screen .cafe-frame {
  top: calc(var(--cy) + var(--ch) * 0.276) !important;
  height: calc(var(--ch) * 0.254) !important;
}

html body #panel .lose #panel-panda {
  left: 33% !important;
  top: 3.5% !important;
  width: 34% !important;
  height: auto !important;
  z-index: 2 !important;
  clip-path: none !important;
}
html body #panel .lose #panel-text::after {
  border-image-source: none !important;
  background: #fff !important;
  border: 3px solid #d8b892 !important;
  border-radius: 18px !important;
}
html body #panel .lose #panel-text {
  background: none !important;
}
html body #panel .lose .miss,
html body #panel .lose #panel-text .goal,
html body #panel .lose #panel-text > div > div {
  background: #fffaf2 !important;
}
html body #panel .lose #more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4% !important;
  padding: 0 6% !important;
}
html body #panel .lose #more .more-ico {
  position: static !important;
  width: 22% !important;
  flex: 0 0 auto;
}
html body #panel .lose #more em {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  line-height: 1.05;
}
html body #panel .lose #panel-text .earn {
  background: #fff !important;
  border: 3px solid #d8b892 !important;
  box-shadow: 0 3px 0 rgba(58, 36, 22, 0.12) !important;
}
/* mundos: cenário da partida por grupo de 20 fases (só na partida) */
body:not(.at-home):not(.at-map):not(.at-cafe)[data-world='1'] {
  --bgi: url(../assets/mundo-padaria-retrato.webp);
}
body:not(.at-home):not(.at-map):not(.at-cafe)[data-world='2'] {
  --bgi: url(../assets/mundo-sorveteria-retrato.webp);
}
body:not(.at-home):not(.at-map):not(.at-cafe)[data-world='3'] {
  --bgi: url(../assets/mundo-casadecha-retrato.webp);
}
body:not(.at-home):not(.at-map):not(.at-cafe)[data-world='4'] {
  --bgi: url(../assets/mundo-chocolateria-retrato.webp);
}
@media (min-aspect-ratio: 11/10) {
  body:not(.at-home):not(.at-map):not(.at-cafe)[data-world='1'] {
    --bgi: url(../assets/mundo-padaria-paisagem.webp);
  }
  body:not(.at-home):not(.at-map):not(.at-cafe)[data-world='2'] {
    --bgi: url(../assets/mundo-sorveteria-paisagem.webp);
  }
  body:not(.at-home):not(.at-map):not(.at-cafe)[data-world='3'] {
    --bgi: url(../assets/mundo-casadecha-paisagem.webp);
  }
  body:not(.at-home):not(.at-map):not(.at-cafe)[data-world='4'] {
    --bgi: url(../assets/mundo-chocolateria-paisagem.webp);
  }
}
body:not([data-world='0']) #decor {
  display: none !important;
} /* os enfeites são do café (mundo 1) */
html body #panel .lose #more {
  display: grid !important;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas: 'ico txt' 'ico price';
  justify-content: center !important;
  align-items: center !important;
  column-gap: 0.5em !important;
  row-gap: 0 !important;
  padding: 0 !important;
}
html body #panel .lose #more .more-ico {
  grid-area: ico;
  position: static !important;
  width: auto !important;
  height: calc(var(--ch) * 0.07) !important;
  transform: none !important;
}
html body #panel .lose #more em {
  grid-area: txt;
  align-self: end;
}
html body #panel .lose #more span {
  grid-area: price;
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  gap: 0.2em;
  align-self: start;
  font-size: 0.8em !important;
}
html body #panel .lose #more span img {
  height: 1em;
  width: auto;
}
html body #cafe-screen .cafe-prog > div {
  min-width: 0 !important;
}
html body #cafe-screen .cf-lbl {
  white-space: nowrap;
  font-size: calc(var(--ch) * 0.017) !important;
}
html body #cafe-screen #cafe-count {
  white-space: nowrap;
}
html body #cafe-screen .cf-dots i {
  width: calc(var(--ch) * 0.016) !important;
}
html body #cafe-screen .cafe-prog > img:first-child {
  width: calc(var(--cw) * 0.11) !important;
}
html body #cafe-screen .cafe-prog > div {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
}
html body #cafe-screen .cf-dots {
  justify-content: flex-start !important;
  gap: 6% !important;
}
html body #cafe-screen .cf-dots i {
  flex: 0 0 auto !important;
  height: calc(var(--ch) * 0.016) !important;
}
html body #cafe-screen .cafe-prog .cafe-bar.big {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
}
html body #cafe-screen .cafe-prog {
  padding: 0 calc(var(--cw) * 0.04) 0 calc(var(--cw) * 0.035) !important;
  gap: calc(var(--cw) * 0.03) !important;
} /* fixed + % = % da tela: espremia a barra no computador */

html body #cafe-screen .cafe-prog {
  display: none !important;
}
html body #cafe-screen .cafe-steps {
  position: fixed !important;
  z-index: 4;
  left: calc(var(--cx) + var(--cw) * 0.07);
  top: calc(var(--cy) + var(--ch) * 0.585);
  width: calc(var(--cw) * 0.86);
  height: calc(var(--ch) * 0.105);
  display: flex;
  align-items: center;
  gap: calc(var(--cw) * 0.035);
  padding: 0 calc(var(--cw) * 0.04) 0 calc(var(--cw) * 0.025);
  box-sizing: border-box;
  background: linear-gradient(#fffdf6, #fbefd9);
  border: 4px solid #6b3f2a;
  border-radius: calc(var(--ch) * 0.03);
  box-shadow:
    inset 0 0 0 4px #f4bd5f,
    0 6px 0 rgba(58, 36, 22, 0.3);
  animation: itemIn 0.45s var(--pop) 0.2s both;
}
#cafe-screen .cs-badge {
  flex: 0 0 auto;
  width: calc(var(--ch) * 0.078);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 35%, #ffe7a8, #f4b24a);
  border: 3px solid #6b3f2a;
  box-shadow: 0 3px 0 rgba(58, 36, 22, 0.3);
}
#cafe-screen .cs-badge img {
  width: 72%;
  height: auto;
}
#cafe-screen .cs-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--ch) * 0.008);
}
#cafe-screen .cs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
}
#cafe-screen .cs-top b {
  font-size: calc(var(--ch) * 0.024);
  font-weight: 900;
  color: #4a2814;
  white-space: nowrap;
}
#cafe-screen .cs-top span {
  font-size: calc(var(--ch) * 0.024);
  font-weight: 900;
  color: #fff;
  background: linear-gradient(#8fd35a, #5fae35);
  border: 3px solid #3f7a22;
  border-radius: 999px;
  padding: 0.05em 0.6em;
  white-space: nowrap;
}
#cafe-screen .cs-cups {
  display: flex;
  justify-content: space-between;
}
#cafe-screen .cs-cups i {
  width: 12.5%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #efe2cc;
  border: 2px solid #d8b892;
  box-sizing: border-box;
}
#cafe-screen .cs-cups i img {
  width: 82%;
  height: auto;
  filter: grayscale(1) opacity(0.35);
}
#cafe-screen .cs-cups i.on {
  background: #fff6dc;
  border-color: #f4b24a;
  box-shadow: 0 0 calc(var(--ch) * 0.01) rgba(255, 200, 80, 0.6);
}
#cafe-screen .cs-cups i.on img {
  filter: none;
}
#cafe-screen .cs-cups i.new {
  animation: cupPop 0.6s var(--pop) 1s both;
}
@keyframes cupPop {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

html body #cafe-screen .cafe-panda {
  left: calc(var(--cx) - var(--cw) * 0.01) !important;
  top: calc(var(--cy) + var(--ch) * 0.7) !important;
  width: calc(var(--cw) * 0.32) !important;
}
html body #cafe-screen #cafe-go {
  left: calc(var(--cx) + var(--cw) * 0.34) !important;
  width: calc(var(--cw) * 0.56) !important;
  top: calc(var(--cy) + var(--ch) * 0.8) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #cafe-screen .cafe-steps,
  #cafe-screen .cs-cups i.new {
    animation: none !important;
  }
}
html body #boosters[hidden],
body.at-cafe #boosters {
  display: none !important;
} /* o modo deitado forçava display:flex mesmo escondido */
html body #cafe-screen .cafe-steps {
  height: calc(var(--ch) * 0.13) !important;
  top: calc(var(--cy) + var(--ch) * 0.59) !important;
}
#cafe-screen .cs-badge {
  width: calc(var(--ch) * 0.09) !important;
}
#cafe-screen .cs-top b,
#cafe-screen .cs-top span {
  font-size: calc(var(--ch) * 0.027) !important;
}
#cafe-screen .cs-cups i {
  width: 13% !important;
}
html body #cafe-screen .cafe-panda {
  top: calc(var(--cy) + var(--ch) * 0.705) !important;
  width: calc(var(--cw) * 0.36) !important;
}
html body #cafe-screen #cafe-go {
  top: calc(var(--cy) + var(--ch) * 0.79) !important;
  left: calc(var(--cx) + var(--cw) * 0.37) !important;
  width: calc(var(--cw) * 0.55) !important;
}
/* logo do menu centralizada no celular (estava com o centro em 54% da tela) */
@media (max-aspect-ratio: 11/10) {
  html body #home .home-logo {
    left: calc(var(--cx) + var(--cw) * 0.195) !important;
  }
}
/* lousa: nome do mundo numa linha, faixa de fases menor embaixo; pílula do café sem encavalar no celular */
html body #map .lv-title {
  line-height: 1.05;
  white-space: nowrap;
}
#map .lv-title small {
  display: block;
  font-size: 0.62em;
  font-weight: 800;
  opacity: 0.8;
}
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-title {
    top: calc(var(--my) + var(--mh) * 0.17) !important;
    font-size: calc(var(--mh) * 0.026) !important;
  }
  html body #map .mp-cafe {
    width: auto !important;
    min-width: calc(var(--mw) * 0.34);
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 1em 0 calc(var(--mh) * 0.075) !important;
  }
}
/* "Delicious!": texto no meio do corpo da faixa */
html body .cb-banner svg {
  top: 6% !important;
}
/* metas do HUD: ícones na mesma altura, fonte um pouco menor */
html body #hud .goal img {
  height: 50% !important;
  width: auto !important;
  aspect-ratio: 1;
  object-fit: contain !important;
  flex: 0 0 auto;
}
html body #hud .goal span {
  font-size: calc(var(--sh) * 0.019) !important;
}
html body #hud .goal {
  justify-content: center !important;
  gap: 4% !important;
}
@media (min-aspect-ratio: 11/10) {
  html body #hud .goal span {
    font-size: calc(var(--sh) * 0.023) !important;
  }
}

/* ===== vitória refeita (o-que-melhoraria/vitoria-20261107): cartão centrado na tela, grade com ritmo igual.
   --u = unidade do cartão (largura de uma coluna). Em pé/computador: 1 coluna; celular deitado: 2 colunas. ===== */
#panel {
  z-index: 10;
} /* o HUD (z 9 no modal) cobria o cartão no celular deitado */
html body #panel .card.win {
  --u: min(88vw, 56vh, 620px);
  left: 50% !important;
  top: 50% !important;
  translate: -50% -50%;
  width: var(--u) !important;
  height: auto !important;
  box-sizing: border-box;
  padding: calc(var(--u) * 0.075) calc(var(--u) * 0.07) calc(var(--u) * 0.05) !important;
  display: grid !important;
  grid-template-columns: 1fr;
  justify-items: stretch;
  row-gap: calc(var(--u) * 0.04);
}
html body #panel .card.win::after {
  border-width: calc(var(--u) * 0.06);
  border-image: url(../assets/ui-painel.webp) 12% fill / calc(var(--u) * 0.06) stretch;
}
html body #panel .card.win > *:not(.confetti) {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  translate: none;
}
html body #panel .card.win .stars {
  height: calc(var(--u) * 0.24) !important;
  justify-content: center !important;
  gap: calc(var(--u) * 0.015);
  align-items: center;
}
html body #panel .card.win .stars i {
  width: calc(var(--u) * 0.2) !important;
  height: calc(var(--u) * 0.2) !important;
}
html body #panel .card.win .stars i:nth-child(2) {
  width: calc(var(--u) * 0.25) !important;
  height: calc(var(--u) * 0.25) !important;
  margin-top: calc(var(--u) * -0.04);
}
html body #panel .card.win #panel-text {
  height: calc(var(--u) * 0.17) !important;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: calc(var(--u) * 0.035);
}
html body #panel .card.win .earn {
  width: auto !important;
  height: 100%;
  justify-content: center;
  gap: 6%;
  padding: 0 4% !important;
  font-size: calc(var(--u) * 0.062) !important;
}
html body #panel .card.win .earn::after,
html body #panel .card.win #cafe-box::after {
  border-width: calc(var(--u) * 0.03) calc(var(--u) * 0.036);
  border-image-width: calc(var(--u) * 0.03) calc(var(--u) * 0.036);
}
html body #panel .card.win .earn img {
  height: 72% !important;
}
html body #panel .card.win #cafe-box {
  height: calc(var(--u) * 0.3) !important;
  display: flex !important;
  align-items: center;
  gap: calc(var(--u) * 0.035);
  padding: 0 calc(var(--u) * 0.045) 0 0 !important;
}
html body #panel .card.win #cafe-box canvas {
  height: 112% !important;
  width: auto !important;
  aspect-ratio: 1.47;
  margin-left: calc(var(--u) * -0.02);
  border-width: calc(var(--u) * 0.012);
  box-shadow:
    0 0 0 calc(var(--u) * 0.007) var(--ink),
    0 calc(var(--u) * 0.012) 0 rgba(58, 36, 22, 0.25);
}
html body #panel .card.win .cafe-side {
  gap: calc(var(--u) * 0.025);
  min-width: 0;
}
html body #panel .card.win .cafe-side span {
  font-size: calc(var(--u) * 0.058) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body #panel .card.win .cafe-bar {
  height: calc(var(--u) * 0.065) !important;
  border-width: calc(var(--u) * 0.008) !important;
}
html body #panel .card.win .cafe-bar em {
  font-size: calc(var(--u) * 0.042);
}
html body #panel .card.win #panel-btn {
  --bh: calc(var(--u) * 0.17);
  justify-self: center;
  width: 68% !important;
  height: var(--bh) !important;
  margin-top: calc(var(--u) * 0.01) !important;
  font-size: calc(var(--u) * 0.09) !important;
  padding: 0 !important;
}
html body #panel .card.win #panel-home {
  justify-self: center;
  min-height: 44px;
  font-size: calc(var(--u) * 0.052) !important;
  margin-top: calc(var(--u) * -0.025) !important;
}
/* celular deitado: estrelas e ganhos à esquerda, café e botões à direita */
html.phone-land body #panel .card.win {
  --u: min(46vw, 78vh);
  width: calc(var(--u) * 2.15) !important;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--u) * 0.1);
  grid-template-areas: 'st cf' 'tx bt' 'tx hm';
  align-items: center;
  padding: calc(var(--u) * 0.07) calc(var(--u) * 0.08) calc(var(--u) * 0.045) !important;
  row-gap: calc(var(--u) * 0.03);
}
html.phone-land body #panel .card.win .stars {
  grid-area: st;
}
html.phone-land body #panel .card.win #panel-text {
  grid-area: tx;
  align-self: start;
}
html.phone-land body #panel .card.win #cafe-box {
  grid-area: cf;
}
html.phone-land body #panel .card.win #panel-btn {
  grid-area: bt;
}
html.phone-land body #panel .card.win #panel-home {
  grid-area: hm;
}
html body #panel .card.win {
  grid-template-columns: minmax(0, 1fr);
}
html.phone-land body #panel .card.win {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
html body #panel .card.win > *:not(.confetti),
html body #panel .card.win .earn {
  min-width: 0;
  max-width: 100%;
}
html body #panel .card.win #panel-text {
  grid-auto-columns: minmax(0, 1fr);
}
html body #panel .card.win .earn img {
  height: calc(var(--u) * 0.115) !important;
  width: auto !important;
  flex: none;
}
html body #panel .card.win #cafe-box canvas {
  width: calc(var(--u) * 0.4) !important;
  height: auto !important;
  flex: none;
}
html body #panel .card.win > :is(#stars, #panel-text, #cafe-box, #panel-btn, #panel-home) {
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
}
html body #panel .card.win {
  padding-bottom: calc(var(--u) * 0.06) !important;
}
html body #panel .card.win #panel-home {
  margin-top: calc(var(--u) * -0.03) !important;
}

html body #panel .card.win #panel-home {
  display: none !important;
}
html body #panel .card.win {
  padding-bottom: calc(var(--u) * 0.075) !important;
}
html body #cafe-screen .cafe-panda {
  z-index: 6 !important;
} /* chapéu por cima do cartão "Café upgrades" (os dois tinham z 4) */
/* lousa deitada: 4 linhas de 5 passavam da borda de baixo; grade mais estreita e centrada (botões ~15% menores) */
@media (min-aspect-ratio: 11/10) {
  html body #map .lv-grid {
    width: calc(var(--sw) * 0.4) !important;
    left: calc(var(--sx) + var(--sw) * 0.3) !important;
  }
}

#map .mp-cafe .tq {
  display: none !important;
}
@media (min-aspect-ratio: 11/10) and (min-height: 560px) {
  html body #map .mp-cafe {
    top: calc(var(--sy) + var(--sh) * 0.84) !important;
  }
}

/* fundo da lousa por mundo (data-map-world = página do mapa) */
body.at-map[data-map-world='1'] {
  --bgi: url(../assets/fases-padaria-retrato.webp) !important;
}
body.at-map[data-map-world='2'] {
  --bgi: url(../assets/fases-sorveteria-retrato.webp) !important;
}
body.at-map[data-map-world='3'] {
  --bgi: url(../assets/fases-casadecha-retrato.webp) !important;
}
body.at-map[data-map-world='4'] {
  --bgi: url(../assets/fases-chocolateria-retrato.webp) !important;
}
@media (min-aspect-ratio: 11/10) {
  body.at-map[data-map-world='1'] {
    --bgi: url(../assets/fases-padaria-paisagem.webp) !important;
  }
  body.at-map[data-map-world='2'] {
    --bgi: url(../assets/fases-sorveteria-paisagem.webp) !important;
  }
  body.at-map[data-map-world='3'] {
    --bgi: url(../assets/fases-casadecha-paisagem.webp) !important;
  }
  body.at-map[data-map-world='4'] {
    --bgi: url(../assets/fases-chocolateria-paisagem.webp) !important;
  }
}
#play .shine-wrap,
#play .shine {
  display: none !important;
}
#map .lv.pressed,
.btn.pressed {
  transform: scale(1.12) !important;
  transition: transform 80ms cubic-bezier(0.3, 1.6, 0.5, 1) !important;
}

@keyframes icBg {
  from {
    background: rgba(58, 36, 22, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}
@keyframes icCard {
  0% {
    transform: translateY(40px) scale(0.85);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  70% {
    transform: translateY(-3px) scale(1.04);
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes icDrop {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
}
@keyframes icPop {
  0% {
    transform: scale(0);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes icPulse {
  50% {
    transform: scale(1.05);
  }
}
@keyframes icPeek {
  0% {
    transform: translateY(30%);
    opacity: 0;
  }
  60% {
    transform: translateY(-8%);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
html body #intro:not(.out) {
  animation: icBg 0.24s ease-out both !important;
}
html body #intro:not(.out) .intro-card {
  animation: icCard 0.34s cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
}
html body #intro:not(.out) .ic-rib {
  animation: icDrop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.08s both !important;
}
html body #intro:not(.out) .ic-goal {
  animation: icPop 0.26s cubic-bezier(0.3, 1.5, 0.5, 1) 0.16s both !important;
}
html body #intro:not(.out) .ic-goal:nth-child(2) {
  animation-delay: 0.21s !important;
}
html body #intro:not(.out) .ic-goal:nth-child(3) {
  animation-delay: 0.26s !important;
}
html body #intro:not(.out) .ic-mv {
  animation: icDrop 0.2s ease-out 0.27s both !important;
}
html body #intro:not(.out) .intro-card u {
  display: inline-block;
  animation:
    icPop 0.24s cubic-bezier(0.3, 1.5, 0.5, 1) 0.32s both,
    icPulse 0.9s ease-in-out 0.7s infinite !important;
}
html body #intro:not(.out) .intro-card .ic-panda {
  animation: icPeek 0.36s cubic-bezier(0.3, 1.4, 0.5, 1) 0.3s both !important;
}
body.wiping #intro {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #intro:not(.out),
  html body #intro:not(.out) * {
    animation: none !important;
  }
}
html body #intro:not(.out) .ic-rib {
  animation-delay: 0.03s !important;
}
html body #intro:not(.out) .ic-goal {
  animation-delay: 0.07s !important;
}
html body #intro:not(.out) .ic-goal:nth-child(2) {
  animation-delay: 0.1s !important;
}
html body #intro:not(.out) .ic-goal:nth-child(3) {
  animation-delay: 0.13s !important;
}
html body #intro:not(.out) .ic-mv {
  animation-delay: 0.13s !important;
}
html body #intro:not(.out) .intro-card u {
  animation-delay: 0.17s, 0.6s !important;
}
html body #intro:not(.out) .intro-card .ic-panda {
  animation-delay: 0.18s !important;
}
/* ===== transição entre telas (FEEL.wipe): véu de desfoque quente, nunca opaco; tela de saída dá zoom no toque ===== */
#wipe {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(110, 66, 36, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}
#wipe.in {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--in) ease-in;
}
#wipe.out {
  visibility: visible;
  opacity: 0;
  transition:
    opacity var(--out) cubic-bezier(0.2, 0.7, 0.3, 1),
    visibility 0s var(--out);
}
.screen.leaving:not(#panel) {
  transform: scale(1.12);
  opacity: 0.6;
  transition:
    transform 160ms cubic-bezier(0.5, 0, 0.9, 0.5),
    opacity 160ms ease-in;
}
/* cartão da fase nasce da moeda tocada; a cascata espera ele chegar a ~70% */
@keyframes icFromCoin {
  0% {
    transform: translate(var(--cfx), var(--cfy)) scale(var(--cfs)); /* --cfx: não usar --fx, que é o esmaecimento do fundo */
    opacity: 0.9;
  }
  65% {
    transform: translate(0, -4px) scale(1.04);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
html body.from-coin #intro:not(.out) .intro-card {
  animation: icFromCoin 0.34s cubic-bezier(0.25, 0.8, 0.3, 1) both !important;
}
html body.from-coin #intro:not(.out) .ic-rib {
  animation-delay: 0.2s !important;
}
html body.from-coin #intro:not(.out) .ic-goal {
  animation-delay: 0.23s !important;
}
html body.from-coin #intro:not(.out) .ic-goal:nth-child(2) {
  animation-delay: 0.27s !important;
}
html body.from-coin #intro:not(.out) .ic-goal:nth-child(3) {
  animation-delay: 0.31s !important;
}
html body.from-coin #intro:not(.out) .ic-mv {
  animation-delay: 0.3s !important;
}
html body.from-coin #intro:not(.out) .intro-card u {
  animation-delay: 0.34s, 0.8s !important;
}
html body.from-coin #intro:not(.out) .intro-card .ic-panda {
  animation-delay: 0.36s !important;
}
@media (prefers-reduced-motion: reduce) {
  .screen.leaving {
    transform: none;
  }
  #wipe {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(110, 66, 36, 0.5);
  }
}
@keyframes scrLeave {
  to {
    transform: scale(1.14);
    opacity: 0.55;
  }
}
html body .screen.leaving:not(#panel) {
  animation: scrLeave 160ms cubic-bezier(0.5, 0, 0.9, 0.5) both !important;
}

html body.from-coin #intro:not(.out) :is(.ic-rib, .ic-goal, .ic-mv) {
  animation: none !important;
}

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