/* Latte Lane styles, part 3 of 5. The parts load in order: a rule in a later part overrides the same rule in an earlier one. */
#panel .win #panel-panda {
  z-index: -1 !important;
}
#panel .win .pn-glow,
#panel .win .pn-raios {
  z-index: -2 !important;
}
#panel .win .pn-raios {
  top: -45% !important;
  height: 60% !important;
  background: repeating-conic-gradient(
    from -90deg at 50% 75%,
    rgba(255, 206, 90, 0.95) 0 6deg,
    transparent 6deg 18deg
  ) !important;
}
body.panel-win #boosters {
  z-index: 9;
}

.cb-glow {
  background: radial-gradient(
    closest-side,
    rgba(255, 246, 190, 1),
    rgba(255, 214, 90, 0.85) 40%,
    rgba(255, 214, 90, 0)
  ) !important;
}
.cb-raios {
  position: fixed;
  left: calc(var(--sx) + var(--sw) * 0.25);
  top: calc(var(--sy) + var(--sh) * 0.33);
  width: calc(var(--sw) * 0.48);
  height: calc(var(--sh) * 0.44);
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 160, 0.85) 0 8deg, transparent 8deg 24deg);
  -webkit-mask: radial-gradient(closest-side, #000 25%, transparent 100%);
  mask: radial-gradient(closest-side, #000 25%, transparent 100%);
}
@media (max-aspect-ratio: 11/10) {
  .cb-raios {
    left: var(--cx);
    top: calc(var(--cy) + var(--ch) * 0.3);
    width: var(--cw);
    height: calc(var(--ch) * 0.42);
  }
}

#map .mnode.cur::before {
  inset: -85% -45% !important;
  background: radial-gradient(
    closest-side,
    rgba(255, 250, 200, 1),
    rgba(255, 220, 100, 0.85) 40%,
    rgba(255, 214, 90, 0.35) 70%,
    transparent
  ) !important;
}
#map .mnode.cur::after {
  inset: -70% -40% !important;
  background:
    url(../assets/ui-brilhos.webp) 92% 8% / 34% no-repeat,
    url(../assets/ui-brilho.webp) 6% 20% / 16% no-repeat,
    url(../assets/ui-brilho.webp) 12% 92% / 12% no-repeat,
    url(../assets/ui-brilho.webp) 94% 88% / 14% no-repeat !important;
}

#panel .win .st-tq {
  height: calc(var(--ch) * 0.085) !important;
}
#panel .win .st-tq.l {
  left: 7% !important;
  top: 12% !important;
}
#panel .win .st-tq.r {
  left: 83% !important;
  top: 12% !important;
}
#panel .win .pn-sp.a,
#panel .win .pn-sp.b {
  width: 7% !important;
}
body.panel-win #boosters {
  z-index: auto;
}
#panel .win #panel-home {
  bottom: 2.5% !important;
}
.cf-tq.l,
.cf-tq.r {
  height: calc(var(--ch) * 0.06) !important;
}
.cf-tq.l {
  left: calc(var(--cx) + var(--cw) * 0.39) !important;
  top: calc(var(--cyT) + var(--ch) * 0.215) !important;
}
.cf-tq.r {
  left: calc(var(--cx) + var(--cw) * 0.53) !important;
  top: calc(var(--cyT) + var(--ch) * 0.215) !important;
}
.cf-tq.p {
  height: calc(var(--ch) * 0.05) !important;
}

#hud #panda {
  object-fit: contain !important;
  object-position: 50% 100% !important;
  clip-path: none !important;
}
@media (max-aspect-ratio: 11/10) {
  body.tip-on #hud #panda {
    height: calc(var(--sh) * 0.141) !important;
  }
  body:not(.tip-on) #hud #panda {
    height: calc(var(--sh) * 0.156) !important;
  }
  body.modal #hud #panda,
  body.at-cafe #hud #panda {
    height: calc(var(--sh) * 0.148) !important;
  }
}
@media (min-aspect-ratio: 11/10) {
  #hud #panda {
    height: calc(var(--sh) * 0.225) !important;
  }
}
#hud .box.mv {
  width: calc(var(--sw) * 0.147) !important;
}
@media (min-aspect-ratio: 11/10) {
  #hud .box.mv {
    width: calc(var(--sw) * 0.073) !important;
  }
}
body.at-home .topbar .coin-pill b {
  display: inline-block;
  width: calc(var(--cw) * 0.133);
}
@media (max-aspect-ratio: 11/10) {
  #home .home-shadow {
    height: calc(var(--ch) * 0.036) !important;
  }
}
#map .mp-cafe .tq {
  height: calc(var(--ch) * 0.027) !important;
  width: auto !important;
}
#map .map-dust {
  height: calc(var(--ch) * 0.024) !important;
  width: auto !important;
}
#map .mp-bar .goal img {
  width: calc(var(--cw) * 0.106) !important;
  height: calc(var(--ch) * 0.042) !important;
  object-fit: contain;
}
#pause #pause-quit {
  height: calc(var(--ch) * 0.042) !important;
  --bh: calc(var(--ch) * 0.042);
}
#panel .win .ribbon {
  height: calc(var(--ch) * 0.084) !important;
  aspect-ratio: auto !important;
}
#panel .win .ribbon {
  background: none !important;
  overflow: visible;
  isolation: isolate;
}
#panel .win .ribbon::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -7%;
  top: -4%;
  bottom: -18%;
  background: url(../assets/ui-faixa-rosa.webp) center / contain no-repeat;
}
#panel .lose .ribbon {
  height: calc(var(--ch) * 0.114) !important;
  aspect-ratio: auto !important;
}

#map .mp-cafe .tq.l {
  width: calc(var(--cw) * 0.064) !important;
  height: calc(var(--ch) * 0.03) !important;
  object-fit: contain !important;
}
#map .mp-cafe .tq.r {
  width: calc(var(--cw) * 0.058) !important;
  height: calc(var(--ch) * 0.027) !important;
  object-fit: contain !important;
}
#map .map-dust {
  width: calc(var(--cw) * 0.053) !important;
  height: calc(var(--ch) * 0.024) !important;
  object-fit: contain !important;
}
#pause .card #pause-quit {
  height: 9.4% !important;
}
@media (min-aspect-ratio: 11/10) {
  .cb-banner {
    height: calc(var(--sh) * 0.175) !important;
    aspect-ratio: auto !important;
  }
  .cb-panda {
    height: calc(var(--sh) * 0.25) !important;
    width: auto !important;
  }
  body.celebrating #hud #panda {
    left: calc(var(--sx) + var(--sw) * 0.572) !important;
  }
}

#map .mnode.cur::before {
  background: radial-gradient(
    closest-side,
    rgba(255, 214, 90, 0) 30%,
    rgba(255, 214, 90, 0.75) 45%,
    rgba(255, 214, 90, 0.3) 70%,
    transparent
  ) !important;
}
#map .mnode.cur {
  filter: drop-shadow(0 0 1vh rgba(255, 200, 60, 0.9)) saturate(1.3) !important;
}
@media (max-aspect-ratio: 11/10) {
  #home .play-ticks {
    height: calc(var(--ch) * 0.075) !important;
  }
  body.at-home .coin-ticks {
    height: calc(var(--ch) * 0.045) !important;
  }
  #home .home-ticks {
    height: calc(var(--ch) * 0.09) !important;
  }
  #panda-tq {
    height: calc(var(--sh) * 0.065) !important;
  }
  #hud .goal img {
    height: calc(var(--sh) * 0.052) !important;
  }
  #home .home-shadow {
    left: calc(var(--cx) + var(--cw) * 0.28) !important;
    width: calc(var(--cw) * 0.42) !important;
    top: calc(var(--cy) + var(--ch) * 0.712) !important;
    height: calc(var(--ch) * 0.036) !important;
    z-index: 0 !important;
  }
}
#map .mp-cafe .tq.l {
  transform: scaleX(-1);
}
body:not(.at-map):not(.at-home) #tip::before,
body:not(.at-map):not(.at-home) #tip::after {
  height: 120% !important;
  width: 8% !important;
  top: -95% !important;
}

.cb-raios {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 226, 120, 0.95) 0 9deg,
    rgba(255, 226, 120, 0) 9deg 22deg
  ) !important;
  -webkit-mask: radial-gradient(closest-side, transparent 18%, #000 30%, #000 60%, transparent 100%) !important;
  mask: radial-gradient(closest-side, transparent 18%, #000 30%, #000 60%, transparent 100%) !important;
  animation: spin 18s linear infinite;
}
#hud .bar,
#map .mp-bar {
  background: linear-gradient(#fff3df, #fbdfb6) !important;
}
/* vitória: brilho e raios bem visíveis atrás da mascote (acima da arte do painel) */
#panel .win .pn-raios {
  z-index: 0 !important;
  opacity: 1;
}
#panel .win .pn-glow {
  z-index: 0 !important;
  background: radial-gradient(
    closest-side,
    rgba(255, 248, 200, 1),
    rgba(255, 222, 110, 0.95) 35%,
    rgba(255, 206, 90, 0.55) 65%,
    rgba(255, 206, 90, 0)
  ) !important;
}
#panel .win #panel-panda {
  z-index: 1 !important;
}
#panel .win .stars {
  z-index: 2 !important;
}
#panel .win .pn-glow {
  left: -6% !important;
  top: -42% !important;
  width: 112% !important;
  height: 58% !important;
  background: radial-gradient(
    ellipse 50% 50% at 50% 55%,
    rgba(255, 248, 200, 1),
    rgba(255, 222, 110, 0.9) 40%,
    rgba(255, 206, 90, 0.45) 70%,
    rgba(255, 206, 90, 0)
  ) !important;
}
#panel .win .pn-glow {
  background: radial-gradient(
    ellipse 62% 70% at 50% 42%,
    rgba(255, 250, 210, 1),
    rgba(255, 226, 120, 0.95) 45%,
    rgba(255, 206, 90, 0.6) 72%,
    rgba(255, 206, 90, 0)
  ) !important;
}

@media (max-aspect-ratio: 11/10) {
  body.at-home .coin-ticks {
    height: calc(var(--ch) * 0.03) !important;
  }
  #home .home-ticks {
    height: calc(var(--ch) * 0.072) !important;
  }
  #home .home-shadow {
    left: calc(var(--cx) + var(--cw) * 0.319) !important;
    width: calc(var(--cw) * 0.351) !important;
    top: calc(var(--cy) + var(--ch) * 0.7) !important;
  }
}
html body #pause .card #pause-quit {
  height: calc(var(--ch) * 0.042) !important;
  min-height: 0 !important;
  line-height: 1 !important;
}
@media (min-aspect-ratio: 11/10) {
  .cb-panda {
    width: calc(var(--sw) * 0.165) !important;
    height: calc(var(--sh) * 0.25) !important;
    object-fit: contain;
  }
  html body.celebrating #hud #panda {
    left: calc(var(--sx) + var(--sw) * 0.572) !important;
  }
}
#map .mp-bar .box.lv {
  height: calc(var(--ch) * 0.078) !important;
}

#hud .goals {
  border-left: 5px solid #4a2814 !important;
}
.cb-glow {
  background: radial-gradient(
    ellipse 60% 62% at 50% 45%,
    rgba(255, 250, 210, 1),
    rgba(255, 226, 120, 0.95) 45%,
    rgba(255, 206, 90, 0.6) 72%,
    rgba(255, 206, 90, 0)
  ) !important;
  border-radius: 0 !important;
}
.cb-cf {
  width: calc(var(--sw) * 0.03) !important;
  height: calc(var(--sh) * 0.055) !important;
  border-radius: 4px;
}
#home .home-shadow {
  background: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    rgba(58, 36, 22, 0.55) 0 58%,
    rgba(58, 36, 22, 0.25) 80%,
    rgba(58, 36, 22, 0) 100%
  ) !important;
  border-radius: 50%;
}
#panel .win .pn-glow {
  left: -20% !important;
  top: -55% !important;
  width: 140% !important;
  height: 80% !important;
  background: radial-gradient(
    ellipse 45% 45% at 50% 45%,
    rgba(255, 250, 210, 1),
    rgba(255, 226, 120, 0.9) 40%,
    rgba(255, 206, 90, 0.5) 70%,
    rgba(255, 206, 90, 0) 100%
  ) !important;
}
/* End of game.css */

:root {
  --bgi: url(../assets/fundo-jogo.webp);
  --gx: var(--cx);
  --gy: var(--cy);
  --gw: var(--cw);
  --gh: var(--ch);
}
body.at-home {
  --bgi: url(../assets/fundo-inicio.webp);
}
body.at-map {
  --bgi: url(../assets/mapa-vila.webp);
}
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  background: var(--bgi) center / 100% 100% no-repeat;
}
body::before {
  inset: -6vmax;
  z-index: -2;
  background-size: cover;
  filter: blur(18px) saturate(0.7) brightness(0.86);
}
body::after {
  left: var(--gx);
  top: var(--gy);
  width: var(--gw);
  height: var(--gh);
  z-index: -1;
  -webkit-mask:
    linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(transparent, #000 var(--fy), #000 calc(100% - var(--fy)), transparent);
  mask-composite: intersect;
}
@media (min-aspect-ratio: 11/10) {
  body,
  body.at-home,
  body.at-map {
    --bgi: url(../assets/fundo-desk.webp);
    --gx: var(--sx);
    --gy: var(--sy);
    --gw: var(--sw);
    --gh: var(--sh);
  }
  #map::before {
    content: '';
    position: fixed;
    left: var(--cx);
    top: var(--cy);
    width: var(--cw);
    height: var(--ch);
    z-index: -1;
    pointer-events: none;
    background: url(../assets/mapa-vila.webp) center / cover no-repeat;
    border-radius: 26px;
    box-shadow:
      0 0 0 5px #fff3dc,
      0 0 0 8px #3a2416,
      0 1.6vh 4vh rgba(40, 20, 5, 0.5);
  }
  #map .mp-nav {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #map .mp-nav::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--cx);
    width: var(--cw);
    z-index: -1;
    background: linear-gradient(#fff3dc, #f3dcb6);
    border-top: 3px solid var(--ink);
    border-radius: 26px;
    box-shadow: 0 -4px 0 rgba(58, 36, 22, 0.18);
  }
}
/* fixed + padding/gap em % = % da TELA, não do mapa: estourava no ultrawide */
#map .mp-cafe {
  padding: 0 0 0 calc(var(--cw) * 0.18) !important;
}
#map .mp-bar {
  padding: 0 calc(var(--cw) * 0.03) 0 calc(var(--cw) * 0.024) !important;
  gap: calc(var(--cw) * 0.02) !important;
}
/* pausa dentro da moldura no computador (no celular continua no canto) */
.pause-btn {
  left: calc(var(--sxL) + max(10px, var(--sw) * 0.015)) !important;
  top: calc(var(--syT) + max(10px, env(safe-area-inset-top), var(--sh) * 0.02)) !important;
}
@media (min-aspect-ratio: 11/10) {
  .pause-btn {
    width: calc(var(--sh) * 0.075) !important;
    height: calc(var(--sh) * 0.075) !important;
  }
  /* dica ao lado do tabuleiro, sem cobrir o HUD */
  body:not(.at-map):not(.at-home) #tip {
    left: calc(var(--sx) + var(--sw) * 0.165) !important;
    top: calc(var(--sy) + var(--sh) * 0.5) !important;
    width: calc(var(--sw) * 0.25) !important;
    min-width: 0 !important;
    white-space: normal !important;
    padding: 1.2em 1.4em !important;
    font-size: calc(var(--sh) * 0.028) !important;
    line-height: 1.25;
    text-align: center;
  }
}
/* panda nunca cortado reto: sem clip-path; onde ele "entra" atrás do cartão, fica atrás do fundo do cartão */
html body #hud #panda,
html body.modal #hud #panda,
html body.at-cafe #hud #panda,
#pause .pause-panda,
#panel #panel-panda {
  clip-path: none !important;
}
#pause .pause-panda {
  z-index: -2 !important;
}
#panel .lose #panel-text .need {
  white-space: nowrap;
  display: inline-block;
}
body.modal #tip,
body:has(#pause:not([hidden])) #tip {
  display: none !important;
} /* dica não aparece atrás da pausa/painéis */

#corner {
  position: fixed;
  top: max(10px, env(safe-area-inset-top), 1.8vmin);
  right: max(10px, env(safe-area-inset-right), 1.8vmin);
  z-index: 6;
  display: none;
  gap: max(8px, 1.2vmin);
}
body.at-home #corner,
body.at-map #corner {
  display: flex;
}
body:has(#pause:not([hidden])) #corner {
  display: none;
}
.corner-btn {
  width: clamp(46px, 8vmin, 150px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.12s var(--pop);
}
.corner-btn:hover {
  transform: scale(1.06);
}
.corner-btn:active {
  transform: scale(0.94);
}
.corner-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 0 rgba(58, 36, 22, 0.35));
}
.topbar .gear,
#map .mp-gear,
#map .mp-gift,
.home-dust,
.map-dust {
  display: none !important;
}
/* moedas no canto esquerdo do início, do mesmo tamanho dos botões do canto */
body.at-home .topbar .coin-pill {
  position: fixed !important;
  left: max(10px, env(safe-area-inset-left), 1.8vmin) !important;
  top: max(10px, env(safe-area-inset-top), 1.8vmin) !important;
  height: clamp(46px, 8vmin, 150px) !important;
  width: auto !important;
  min-width: clamp(120px, 20vmin, 230px);
  font-size: clamp(18px, 3.4vmin, 38px) !important;
  box-sizing: border-box;
  padding: 0 1.2em 0 0.3em !important;
}
body.at-home .topbar .coin-pill img {
  height: 86% !important;
  width: auto !important;
}
body.at-home .coin-ticks {
  display: none !important;
}
@media (min-aspect-ratio: 11/10) {
  body.at-home {
    --bgi: url(../assets/home-paisagem.webp);
  }
  body.at-map {
    --bgi: url(../assets/mapa-paisagem.webp);
  }
  #home:not([hidden]) {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    inset: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  #home .home-level {
    display: block !important;
  }
  #map::before {
    display: none !important;
  }
  #map .map-panda {
    width: calc(var(--sw) * 0.095) !important;
  }
  #map .map-logo {
    width: calc(var(--sw) * 0.2) !important;
    left: calc(var(--sx) + var(--sw) * 0.4) !important;
    top: calc(var(--sy) + var(--sh) * 0.02) !important;
  }
  #map .mp-cafe {
    left: calc(var(--sx) + var(--sw) * 0.42) !important;
    top: calc(var(--sy) + var(--sh) * 0.25) !important;
    width: calc(var(--sw) * 0.16) !important;
    height: calc(var(--sh) * 0.07) !important;
    padding-left: calc(var(--sw) * 0.07) !important;
    font-size: calc(var(--sh) * 0.03) !important;
  }
  #map .mp-cafe .shop {
    height: calc(var(--sh) * 0.08) !important;
  }
  #map .mp-cafe .tq.l,
  #map .mp-cafe .tq.r {
    height: calc(var(--sh) * 0.03) !important;
    width: auto !important;
  }
}
@media (max-aspect-ratio: 11/10) {
  #map .map-panda {
    width: calc(var(--cw) * 0.282) !important;
  }
}
/* cartão de ajustes: modos (pausa / ajustes / som) e as 3 linhas no lugar das 4 antigas */
#pause[data-mode='settings'] .m-snd,
#pause[data-mode='sound'] .m-set,
#pause[data-mode='pause'] .m-set {
  display: none !important;
}
#pause .opt.m-set:nth-of-type(1),
#pause .opt.m-snd:nth-of-type(4) {
  top: 17% !important;
}
#pause .opt.m-set:nth-of-type(2),
#pause .opt.m-snd:nth-of-type(5) {
  top: 29.5% !important;
}
#pause .opt.m-set:nth-of-type(3),
#pause .opt.m-snd:nth-of-type(6) {
  top: 42% !important;
}
#pause .opt span {
  width: auto !important;
  filter: none !important;
  font-size: inherit !important;
}
#pause .opt select {
  position: absolute;
  left: 52%;
  top: 50%;
  width: 43%;
  height: 70%;
  transform: translateY(-50%);
  appearance: none;
  -webkit-appearance: none;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: #fffaf0
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233a2416' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
    right 0.7em center / 0.8em no-repeat;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  padding: 0 1.8em 0 0.8em;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(58, 36, 22, 0.12);
}
#pause .opt.vol input[type='range'] {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45%;
  height: 60%;
  transform: translateY(-50%);
  margin: 0;
  opacity: 1;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
}
#pause .opt.vol input[type='range']::-webkit-slider-runnable-track {
  height: 42%;
  min-height: 10px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: linear-gradient(90deg, #8fd35a var(--v, 80%), #e8dccb var(--v, 80%));
}
#pause .opt.vol input[type='range']::-moz-range-track {
  height: 12px;
  border-radius: 999px;
  border: 3px solid var(--ink);
  background: linear-gradient(90deg, #8fd35a var(--v, 80%), #e8dccb var(--v, 80%));
}
#pause .opt.vol input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2.1em;
  height: 2.1em;
  margin-top: -0.75em;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #ffe2a6 60%, #f4bd5f);
  border: 3px solid var(--ink);
  box-shadow: 0 3px 0 rgba(58, 36, 22, 0.35);
}
#pause .opt.vol input[type='range']::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #ffe2a6 60%, #f4bd5f);
  border: 3px solid var(--ink);
}

/* computador: logo, panda e Play na coluna central do cenário largo (as regras antigas do cartão perdem) */
@media (min-aspect-ratio: 11/10) {
  html body #home .home-logo {
    left: calc(var(--cx) + var(--cw) * 0.239) !important;
    top: calc(var(--cyT) + var(--ch) * 0.075) !important;
    width: calc(var(--cw) * 0.61) !important;
  }
  html body #home .home-panda {
    left: calc(var(--cx) + var(--cw) * 0.25) !important;
    top: calc(var(--cy) + var(--ch) * 0.467) !important;
    width: calc(var(--cw) * 0.452) !important;
  }
  html body #home .home-shadow {
    left: calc(var(--cx) + var(--cw) * 0.319) !important;
    top: calc(var(--cy) + var(--ch) * 0.7) !important;
    width: calc(var(--cw) * 0.351) !important;
    height: calc(var(--ch) * 0.036) !important;
  }
  html body #home .home-ticks {
    left: calc(var(--cx) + var(--cw) * 0.606) !important;
    top: calc(var(--cy) + var(--ch) * 0.467) !important;
    width: calc(var(--cw) * 0.09) !important;
    height: auto !important;
  }
  html body #home .play-ticks.l {
    left: calc(var(--cx) + var(--cw) * 0.112) !important;
    top: calc(var(--cyB) + var(--ch) * 0.763) !important;
    width: calc(var(--cw) * 0.08) !important;
    height: calc(var(--ch) * 0.054) !important;
  }
  html body #home .play-ticks.r {
    left: calc(var(--cx) + var(--cw) * 0.797) !important;
    top: calc(var(--cyB) + var(--ch) * 0.766) !important;
    width: calc(var(--cw) * 0.074) !important;
    height: calc(var(--ch) * 0.051) !important;
  }
  html body #home #play {
    left: calc(var(--cx) + var(--cw) * 0.191) !important;
    top: calc(var(--cyB) + var(--ch) * 0.749) !important;
    width: calc(var(--cw) * 0.604) !important;
    height: calc(var(--ch) * 0.132) !important;
    font-size: calc(var(--ch) * 0.084) !important;
  }
  html body #home .home-level {
    left: calc(var(--cx) + var(--cw) * 0.303) !important;
    top: calc(var(--cyB) + var(--ch) * 0.893) !important;
    width: calc(var(--cw) * 0.367) !important;
    height: calc(var(--ch) * 0.063) !important;
    font-size: calc(var(--ch) * 0.034) !important;
  }
}
@media (max-aspect-ratio: 11/10) {
  html body #home .home-logo {
    top: max(calc(var(--cyT) + var(--ch) * 0.075), calc(clamp(46px, 8vmin, 150px) + 18px)) !important;
  }
  body.at-home .topbar .coin-pill {
    min-width: clamp(92px, 24vw, 160px) !important;
  }
}
/* início: a barra de cima não é mais centralizada (moedas no canto da janela) */
body.at-home .topbar {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  transform: none !important;
  top: 0 !important;
}
html body.at-home .topbar .coin-pill {
  padding: 0 1em 0 calc(clamp(46px, 8vmin, 150px) * 0.95) !important;
}
html body.at-home .topbar .coin-pill b {
  width: auto !important;
}
/* painéis: rótulo à esquerda, controle à direita sem encostar */
#pause .opt select {
  left: 50% !important;
  width: 45% !important;
}
#pause .opt.vol input[type='range'] {
  left: 54% !important;
  width: 41% !important;
}
#pause .opt span {
  white-space: nowrap;
  max-width: 30%;
  overflow: visible;
}
/* computador: logo, panda e Play maiores, medidos pelo palco largo (não pela coluna em pé) */
@media (min-aspect-ratio: 11/10) {
  html body #home .home-logo {
    width: calc(var(--sw) * 0.27) !important;
    left: calc(var(--sx) + var(--sw) * 0.365) !important;
    top: calc(var(--sy) + var(--sh) * 0.03) !important;
  }
  html body #home .home-panda {
    width: calc(var(--sw) * 0.2) !important;
    left: calc(var(--sx) + var(--sw) * 0.4) !important;
    top: calc(var(--sy) + var(--sh) * 0.32) !important;
  }
  html body #home .home-shadow {
    width: calc(var(--sw) * 0.12) !important;
    left: calc(var(--sx) + var(--sw) * 0.44) !important;
    top: calc(var(--sy) + var(--sh) * 0.66) !important;
    height: calc(var(--sh) * 0.04) !important;
  }
  html body #home .home-ticks {
    width: calc(var(--sw) * 0.04) !important;
    left: calc(var(--sx) + var(--sw) * 0.585) !important;
    top: calc(var(--sy) + var(--sh) * 0.33) !important;
    height: auto !important;
  }
  html body #home #play {
    width: calc(var(--sw) * 0.22) !important;
    height: calc(var(--sh) * 0.13) !important;
    --bh: calc(var(--sh) * 0.13);
    left: calc(var(--sx) + var(--sw) * 0.39) !important;
    top: calc(var(--sy) + var(--sh) * 0.72) !important;
    font-size: calc(var(--sh) * 0.075) !important;
  }
  html body #home .play-ticks.l {
    width: calc(var(--sw) * 0.03) !important;
    left: calc(var(--sx) + var(--sw) * 0.355) !important;
    top: calc(var(--sy) + var(--sh) * 0.73) !important;
    height: auto !important;
  }
  html body #home .play-ticks.r {
    width: calc(var(--sw) * 0.03) !important;
    left: calc(var(--sx) + var(--sw) * 0.615) !important;
    top: calc(var(--sy) + var(--sh) * 0.73) !important;
    height: auto !important;
  }
  html body #home .home-level {
    width: calc(var(--sw) * 0.12) !important;
    height: calc(var(--sh) * 0.06) !important;
    left: calc(var(--sx) + var(--sw) * 0.44) !important;
    top: calc(var(--sy) + var(--sh) * 0.88) !important;
    font-size: calc(var(--sh) * 0.032) !important;
  }
}
html body #home .home-level {
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}
@media (min-aspect-ratio: 11/10) {
  #home .home-ticks2 {
    display: none !important;
  }
}
#pause .opt select {
  left: 57% !important;
  width: 38% !important;
  padding: 0 1.6em 0 0.6em !important;
}
/* ===== cartão de início da fase (07/11, "caprichar mais"): mesma arte dos painéis, metas em caixinhas ===== */
html body .intro-card {
  position: relative;
  isolation: isolate;
  width: clamp(270px, 46vmin, 480px);
  box-sizing: border-box;
  padding: clamp(34px, 6.5vmin, 66px) clamp(18px, 3.4vmin, 36px) clamp(20px, 3.6vmin, 38px);
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: clamp(14px, 2.4vmin, 26px);
}
html body .intro-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: solid transparent;
  border-width: clamp(16px, 3vmin, 30px);
  border-image: url(../assets/ui-painel.webp) 12% fill / clamp(16px, 3vmin, 30px) stretch;
  filter: drop-shadow(0 0.9vmin 0 rgba(58, 36, 22, 0.35));
}
.intro-card .ic-rib {
  position: absolute;
  left: -9%;
  right: -9%;
  top: -11%;
  height: auto;
  aspect-ratio: 4.02;
  margin: 0;
  display: grid;
  place-items: center;
  padding-bottom: 2%;
  background: url(../assets/ui-faixa-rosa.webp) center / contain no-repeat;
  color: #fff;
  font-size: 1.55em;
  font-weight: 900;
  -webkit-text-stroke: 0.2em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.12em 0 rgba(58, 36, 22, 0.4);
}
.intro-card .ic-t {
  display: block;
  margin-top: 0.6em;
  font-size: 1em;
  font-weight: 900;
  color: #a8642f;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.intro-card .ic-goals {
  display: flex;
  justify-content: center;
  gap: 4%;
  margin-top: 0.5em;
}
.intro-card .ic-goal {
  position: relative;
  isolation: isolate;
  flex: 0 1 38%;
  aspect-ratio: 1 / 1.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.intro-card .ic-goal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: solid transparent;
  border-width: 0.7em;
  border-image: url(../assets/ui-linha.webp) 30% 12% fill / 0.7em stretch;
}
.intro-card .ic-goal img {
  width: 62%;
  height: auto;
  filter: drop-shadow(0 0.15em 0 rgba(58, 36, 22, 0.25));
}
.intro-card .ic-goal b {
  font-size: 1.6em;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.1;
}
.intro-card .ic-mv {
  margin: 0.8em auto 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 1em 0.25em 0.35em;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(#ffd0e3, #f79cc0);
  font-weight: 900;
  font-size: 1em;
}
.intro-card .ic-mv img {
  width: 1.7em;
  height: 1.7em;
}
.intro-card .ic-mv b {
  font-size: 1.25em;
}
.intro-card i {
  max-width: none !important;
  font-size: 0.8em !important;
  margin-top: 0.8em !important;
}
html body .intro-card u {
  position: relative;
  isolation: isolate;
  display: block;
  width: 78%;
  margin: 1em auto 0;
  padding: 0.45em 0;
  background: none !important;
  border: 0 !important;
  color: #fff;
  font-size: 1.15em;
  -webkit-text-stroke: 0.16em var(--ink);
  paint-order: stroke fill;
}
html body .intro-card u::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border: solid transparent;
  border-width: 0 1.2em;
  border-image: url(../assets/btn-laranja.webp) 0 18% fill / 0 1.2em stretch;
}

#path .mnode {
  min-width: 46px;
}
#pause .opt {
  min-height: 46px;
}
#pause .opt i {
  min-width: 52px;
  min-height: 30px;
}
#pause .opt.vol input[type='range'] {
  min-height: 40px;
}

#panel .lose .ribbon {
  background: none !important;
  overflow: visible;
  isolation: isolate;
}
#panel .lose .ribbon::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -8%;
  right: -7%;
  top: -4%;
  bottom: -18%;
  background: url(../assets/ui-faixa-rosa.webp) center / contain no-repeat;
}
/* juice 07/11: meta cumprida pula maior com brilho; poucos movimentos = brilho quente (nunca vermelho) */
.goal.got img {
  animation: goalGot 0.5s var(--pop);
}
.goal.got span {
  animation: goalGot 0.5s var(--pop) 0.06s;
}
@keyframes goalGot {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.45);
    filter: drop-shadow(0 0 8px #ffe27a) brightness(1.15);
  }
  100% {
    transform: scale(1);
  }
}
#hud .box.mv.low {
  box-shadow:
    0 0 0 3px #ffd36b,
    0 0 18px 4px rgba(255, 200, 80, 0.55) !important;
  animation: lowGlow 1.6s ease-in-out infinite;
}
@keyframes lowGlow {
  50% {
    box-shadow:
      0 0 0 3px #ffe9a8,
      0 0 26px 8px rgba(255, 210, 100, 0.75);
  }
}
@media (prefers-reduced-motion: reduce) {
  #hud .box.mv.low {
    animation: none;
  }
}
/* juice 07/11: painéis com ritmo (itens em sequência) e saída com curva */
@keyframes itemIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
}
@keyframes cardOut {
  to {
    opacity: 0;
    transform: translateY(18px) scale(0.9);
  }
}
#panel .win .earn,
#panel .win #cafe-box,
#panel .win #panel-btn,
#panel .win .ghost {
  animation: itemIn 0.32s var(--pop) both;
}
#panel .win .earn.coin {
  animation-delay: 0.55s;
}
#panel .win .earn.gift {
  animation-delay: 0.65s;
}
#panel .win #cafe-box {
  animation-delay: 0.78s;
}
#panel .win #panel-btn {
  animation-delay: 0.92s;
}
#panel .win .ghost {
  animation-delay: 1s;
}
#panel .lose #panel-text,
#panel .lose #more,
#panel .lose #panel-btn {
  animation: itemIn 0.3s var(--pop) both;
}
#panel .lose #panel-text {
  animation-delay: 0.25s;
}
#panel .lose #more {
  animation-delay: 0.4s;
}
#panel .lose #panel-btn {
  animation-delay: 0.5s;
}
#pause:not([hidden]) .opt {
  animation: itemIn 0.26s var(--pop) both;
}
#pause .opt:nth-of-type(1),
#pause .opt:nth-of-type(4) {
  animation-delay: 0.06s;
}
#pause .opt:nth-of-type(2),
#pause .opt:nth-of-type(5) {
  animation-delay: 0.12s;
}
#pause .opt:nth-of-type(3),
#pause .opt:nth-of-type(6) {
  animation-delay: 0.18s;
}
#pause.closing .card {
  animation: cardOut 0.16s ease-in both;
}
@media (prefers-reduced-motion: reduce) {
  #panel .card *,
  #pause .opt,
  #pause.closing .card {
    animation: none !important;
  }
}

@keyframes breathe {
  50% {
    transform: scale(1.012, 1.022);
  }
}
#hud #panda:not(.hop) {
  animation: breathe 3s ease-in-out infinite;
  transform-origin: 50% 100%;
}
html body #home .home-panda {
  animation: breathe 3s ease-in-out infinite !important;
  transform-origin: 50% 100%;
}
#map .map-panda {
  animation: breathe 3s ease-in-out infinite !important;
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: reduce) {
  #hud #panda,
  #home .home-panda,
  #map .map-panda {
    animation: none !important;
  }
}

@keyframes nodeUnlock {
  0% {
    filter: grayscale(1) brightness(0.9);
    transform: translate(-50%, -50%) scale(0.8);
  }
  55% {
    filter: grayscale(1);
    transform: translate(-50%, -50%) scale(0.8);
  }
  75% {
    filter: none;
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    filter: none;
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes unlockRing {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}
#path .mnode.unlock {
  animation: nodeUnlock 1s var(--pop) both !important;
}
#path .mnode.unlock::after {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 4px solid #ffe27a;
  box-shadow: 0 0 16px #ffd36b;
  animation: unlockRing 1.1s ease-out both;
  pointer-events: none;
}
#map .map-panda.walk {
  transition:
    left 0.7s cubic-bezier(0.3, 0.7, 0.3, 1),
    top 0.7s cubic-bezier(0.3, 0.7, 0.3, 1);
}

html body .cb-raios,
html body #panel .win .pn-raios {
  background: url(../assets/ui-raios.webp) center / contain no-repeat !important;
  -webkit-mask: none !important;
  mask: none !important;
  animation: spin 24s linear infinite;
}
html body .cb-cf {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  aspect-ratio: 1;
  height: auto !important;
}
html body .cb-cf.a {
  background-image: url(../assets/ui-confete-1.webp) !important;
}
html body .cb-cf.b {
  background-image: url(../assets/ui-confete-2.webp) !important;
}
html body .cb-cf.c {
  background-image: url(../assets/ui-confete-5.webp) !important;
}
html body .cb-cf.d {
  background-image: url(../assets/ui-confete-3.webp) !important;
}
@media (prefers-reduced-motion: reduce) {
  html body .cb-raios,
  html body #panel .win .pn-raios {
    animation: none;
  }
}
html body .cb-cf {
  width: calc(var(--sw) * 0.045) !important;
}
@media (max-aspect-ratio: 11/10) {
  html body .cb-cf {
    width: calc(var(--cw) * 0.09) !important;
  }
}

html.fill body::after {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  -webkit-mask: none !important;
  mask: none !important;
}
html.fill body::before {
  display: none;
}
.btn:not(.ghost) {
  padding-bottom: calc(var(--bh, 60px) * 0.09) !important;
  box-sizing: border-box;
}
#pause .opt.m-set:nth-of-type(1),
#pause .opt.m-snd:nth-of-type(4) {
  top: 15% !important;
}
#pause .opt.m-set:nth-of-type(2),
#pause .opt.m-snd:nth-of-type(5) {
  top: 29% !important;
}
#pause .opt.m-set:nth-of-type(3),
#pause .opt.m-snd:nth-of-type(6) {
  top: 43% !important;
}
#pause .opt {
  height: 11.5% !important;
}
#pause #pause-resume {
  top: 61% !important;
}
@media (max-aspect-ratio: 11/10) {
  #map .map-panda {
    width: calc(var(--cw) * 0.22) !important;
  }
}

html body #intro {
  padding-top: 0 !important;
  place-items: center !important;
  background: rgba(58, 36, 22, 0.32);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: cbIn 0.2s ease-out both;
}
html body #intro.out {
  animation: cbIn 0.2s ease-in reverse both;
}
.intro-card .ic-rib {
  font-size: 0 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  padding: 0 !important;
}
.intro-card .ic-rib svg {
  position: absolute;
  left: 0;
  top: -6%;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.intro-card .ic-rib svg text {
  font-family: inherit;
  font-weight: 900;
  fill: #fff;
  stroke: #3a2416;
  stroke-width: 6px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  letter-spacing: 0.5px;
}
.intro-card .ic-goal::after {
  border: 3px solid #d8b892 !important;
  border-image: none !important;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 4px 0 rgba(58, 36, 22, 0.18),
    inset 0 -4px 0 rgba(216, 184, 146, 0.35);
}
.intro-card .ic-panda {
  position: absolute;
  right: -16%;
  bottom: 14%;
  width: 34%;
  z-index: 2;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: breathe 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 4px rgba(58, 36, 22, 0.25));
}
@media (prefers-reduced-motion: reduce) {
  html body #intro {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(58, 36, 22, 0.45);
  }
  .intro-card .ic-panda {
    animation: none;
  }
}
.intro-card .ic-panda {
  right: -22% !important;
  bottom: 26% !important;
  width: 30% !important;
}

html body #hud .goals {
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  height: 100% !important;
  gap: 4% !important;
}
html body #hud .goal {
  position: relative !important;
  height: 76% !important;
  width: auto !important;
  aspect-ratio: 1.1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  background: linear-gradient(#ffffff, #fff6e6) !important;
  border: 3px solid #6b3f2a !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 -4px 0 rgba(216, 184, 146, 0.5),
    0 3px 0 rgba(58, 36, 22, 0.18) !important;
  box-sizing: border-box !important;
  padding: 3% 0 4% !important;
  margin: 0 !important;
}
html body #hud .goal img {
  height: 54% !important;
  width: auto !important;
  max-width: 80%;
  object-fit: contain !important;
  position: static !important;
  margin: 0 !important;
}
html body #hud .goal span {
  position: static !important;
  transform: none !important;
  margin: 2% 0 0 !important;
  line-height: 1 !important;
  font-size: calc(var(--sh) * 0.022) !important;
  color: #4a2814 !important;
  white-space: nowrap;
}
html body #hud .goal.done {
  background: linear-gradient(#f2ffe6, #dff5c9) !important;
  border-color: #4f9a2c !important;
}
html body #hud .goal.done span {
  color: #3f8a22 !important;
}
@media (min-aspect-ratio: 11/10) {
  html body #hud .goal span {
    font-size: calc(var(--sh) * 0.026) !important;
  }
}

html body #celebrate {
  background: rgba(48, 26, 12, 0.42) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
html body .cb-banner {
  background: none !important;
  isolation: isolate;
  aspect-ratio: 4.02 !important;
  height: auto !important;
  font-size: 0 !important;
  left: calc(var(--sx) + var(--sw) * 0.27) !important;
  width: calc(var(--sw) * 0.46) !important;
  top: calc(var(--sy) + var(--sh) * 0.52) !important;
  animation: cbPop 0.45s var(--pop) both;
}
html body .cb-banner::before {
  content: '';
  position: absolute;
  inset: -6% -8% -16%;
  z-index: -1;
  background: url(../assets/ui-faixa-rosa.webp) center / contain no-repeat;
  filter: drop-shadow(0 0.8vh 0 rgba(58, 36, 22, 0.35));
}
html body .cb-banner svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
html body .cb-banner svg text {
  font-family: inherit;
  font-weight: 900;
  fill: #fff;
  stroke: #3a2416;
  stroke-width: 7px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  letter-spacing: 0.5px;
  filter: drop-shadow(0 3px 0 rgba(58, 36, 22, 0.4));
}
@media (max-aspect-ratio: 11/10) {
  html body .cb-banner {
    left: calc(var(--cx) + var(--cw) * 0.04) !important;
    width: calc(var(--cw) * 0.92) !important;
    top: calc(var(--cy) + var(--ch) * 0.5) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #celebrate {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(48, 26, 12, 0.55) !important;
  }
}
html body .cb-glow {
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent 100%) !important;
  mask: radial-gradient(closest-side, #000 55%, transparent 100%) !important;
}

html body #home .home-panda {
  width: calc(var(--cw) * 0.44) !important;
  left: calc(var(--cx) + var(--cw) * 0.28) !important;
  top: calc(var(--cy) + var(--ch) * 0.44) !important;
  height: auto !important;
}
@media (min-aspect-ratio: 11/10) {
  html body #home .home-panda {
    width: calc(var(--sw) * 0.17) !important;
    left: calc(var(--sx) + var(--sw) * 0.415) !important;
    top: calc(var(--sy) + var(--sh) * 0.3) !important;
  }
}

html body.at-home .topbar .coin-pill {
  min-width: 0 !important;
  width: auto !important;
  padding: 0 1em 0 calc(clamp(46px, 8vmin, 150px) * 1.02) !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}
html body.at-home .topbar .coin-pill img {
  position: absolute !important;
  left: -4% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 112% !important;
  width: auto !important;
}

#hud #panda {
  scale: -1 1;
}

html body #home .home-shadow {
  display: block !important;
  position: fixed !important;
  z-index: 0 !important;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(58, 36, 22, 0.42),
    rgba(58, 36, 22, 0.22) 60%,
    rgba(58, 36, 22, 0)
  ) !important;
  left: calc(var(--cx) + var(--cw) * 0.32) !important;
  top: calc(var(--cy) + var(--ch) * 0.7) !important;
  width: calc(var(--cw) * 0.36) !important;
  height: calc(var(--ch) * 0.04) !important;
}
html body #home .home-panda {
  z-index: 1 !important;
}
@media (min-aspect-ratio: 11/10) {
  html body #home .home-shadow {
    left: calc(var(--sx) + var(--sw) * 0.435) !important;
    top: calc(var(--sy) + var(--sh) * 0.615) !important;
    width: calc(var(--sw) * 0.13) !important;
    height: calc(var(--sh) * 0.05) !important;
  }
}
/* ajudas menores (estavam "gordas") */
#boosters .boost {
  scale: 0.82;
}
/* moedas na partida, ao lado das ajudas (é onde se gastam: 80 por ajuda) */
#boosters .boost-coins {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 4%;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.7em 0.15em 0.2em;
  background: #fff3df;
  border: 3px solid #6b3f2a;
  border-radius: 999px;
  font-weight: 900;
  color: #4a2814;
  font-size: calc(var(--sh) * 0.024);
  box-shadow: 0 3px 0 rgba(58, 36, 22, 0.25);
  white-space: nowrap;
}
#boosters .boost-coins img {
  height: 1.6em;
  width: auto;
  margin: -0.25em 0;
}
/* som e ajustes também na partida, no mesmo canto do menu; a pausa fica só com continuar e sair */
body:has(#hud:not([hidden])) #corner {
  display: flex;
}
body:has(#pause:not([hidden])) #corner,
body.modal #corner {
  display: none !important;
}
#pause[data-mode='pause'] .m-snd,
#pause[data-mode='pause'] .m-set {
  display: none !important;
}
#pause[data-mode='pause'] .card {
  height: calc(var(--ch) * 0.3) !important;
  top: calc(var(--cy) + var(--ch) * 0.44) !important;
}
#pause[data-mode='pause'] #pause-resume {
  top: 30% !important;
  height: 24% !important;
}
#pause[data-mode='pause'] #pause-quit {
  top: 64% !important;
  height: 15% !important;
}

body.at-map {
  --bgi: url(../assets/fundo-fases-retrato.webp) !important;
}
#map .map-panda,
#map .map-dust,
#map .mnode {
  display: none !important;
}
#map .lv-grid {
  position: fixed !important;
  inset: auto !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--mh) * 0.012) calc(var(--mw) * 0.02);
  left: calc(var(--mx) + var(--mw) * 0.215);
  top: calc(var(--my) + var(--mh) * 0.235);
  width: calc(var(--mw) * 0.57);
  z-index: 2;
}
#map .lv {
  position: relative;
  aspect-ratio: 1.28;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url(../assets/ui-moeda-nivel2.webp) center / contain no-repeat;
  transition: transform 0.12s var(--pop);
}
#map .lv:hover {
  transform: scale(1.07);
}
#map .lv:active {
  transform: scale(0.94);
}
#map .lv.lock {
  background-image: url(../assets/ui-moeda-cadeado2.webp);
  cursor: default;
}
#map .lv.lock:hover,
#map .lv.lock:active {
  transform: none;
}
#map .lv.cur {
  animation: lvPulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 0.9vh rgba(255, 226, 122, 0.95)) drop-shadow(0 0 0.3vh #fff3b0);
}
@keyframes lvPulse {
  50% {
    transform: scale(1.08);
  }
}
#map .lv b {
  position: absolute;
  inset: 0 0 14% 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--mh) * 0.03);
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 0.16em #6b3a14;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(58, 36, 22, 0.4);
}
#map .lv em {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -18%;
  display: flex;
  justify-content: center;
}
#map .lv em img {
  width: 32%;
  margin: 0 -3%;
  filter: grayscale(1) brightness(0.85) opacity(0.55);
}
#map .lv em img.on {
  filter: drop-shadow(0 1px 0 rgba(58, 36, 22, 0.5));
}
#map .lv em img:nth-child(2) {
  transform: translateY(-16%);
}
#map .lv.unlock {
  animation:
    lvUnlock 1s var(--pop) both,
    lvPulse 1.4s ease-in-out 1s infinite;
}
@keyframes lvUnlock {
  0%,
  55% {
    filter: grayscale(1) brightness(0.9);
    transform: scale(0.8);
  }
  75% {
    filter: none;
    transform: scale(1.3);
  }
  100% {
    filter: none;
    transform: scale(1);
  }
}
#map .lv-title {
  position: fixed;
  margin: 0;
  left: calc(var(--mx) + var(--mw) * 0.2);
  width: calc(var(--mw) * 0.6);
  top: calc(var(--my) + var(--mh) * 0.182);
  text-align: center;
  z-index: 2;
  font-size: calc(var(--mh) * 0.028);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.04em;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
}
#map .lv-arrow {
  position: fixed;
  z-index: 3;
  width: clamp(44px, calc(var(--mw) * 0.13), 110px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  top: calc(var(--my) + var(--mh) * 0.725);
  transition: transform 0.12s var(--pop);
}
#map .lv-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(58, 36, 22, 0.35));
}
#map .lv-arrow.prev {
  left: calc(var(--mx) + var(--mw) * 0.2);
}
#map .lv-arrow.prev img {
  transform: scaleX(-1);
}
#map .lv-arrow.next {
  left: calc(var(--mx) + var(--mw) * 0.67);
}
#map .lv-arrow:hover {
  transform: scale(1.08);
}
#map .lv-arrow:active {
  transform: scale(0.94);
}
#map .lv-arrow[hidden] {
  display: none;
}
html body #map .mp-cafe {
  left: calc(var(--mx) + var(--mw) * 0.335) !important;
  top: calc(var(--my) + var(--mh) * 0.735) !important;
  width: calc(var(--mw) * 0.33) !important;
  height: calc(var(--mh) * 0.055) !important;
  z-index: 3;
}
html body #map .map-logo {
  left: calc(var(--mx) + var(--mw) * 0.3) !important;
  top: calc(var(--my) + var(--mh) * 0.018) !important;
  width: calc(var(--mw) * 0.4) !important;
}
#map .lv-panda {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  width: calc(var(--mw) * 0.27);
  left: calc(var(--mx) + var(--mw) * 0.02);
  top: calc(var(--my) + var(--mh) * 0.79);
  transform-origin: 50% 100%;
  animation: breathe 3s ease-in-out infinite;
}
#map .lv-shadow {
  position: fixed;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58, 36, 22, 0.4), rgba(58, 36, 22, 0));
  width: calc(var(--mw) * 0.2);
  height: calc(var(--mh) * 0.025);
  left: calc(var(--mx) + var(--mw) * 0.055);
  top: calc(var(--my) + var(--mh) * 0.955);
}
@media (min-aspect-ratio: 11/10) {
  body.at-map {
    --bgi: url(../assets/fundo-fases-paisagem.webp) !important;
  }
  #map .lv-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: calc(var(--sh) * 0.022) calc(var(--sw) * 0.016);
    left: calc(var(--sx) + var(--sw) * 0.27);
    top: calc(var(--sy) + var(--sh) * 0.27);
    width: calc(var(--sw) * 0.46);
  }
  #map .lv b {
    font-size: calc(var(--sh) * 0.045);
  }
  #map .lv-title {
    left: calc(var(--sx) + var(--sw) * 0.3);
    width: calc(var(--sw) * 0.4);
    top: calc(var(--sy) + var(--sh) * 0.205);
    font-size: calc(var(--sh) * 0.04);
  }
  #map .lv-arrow {
    width: calc(var(--sh) * 0.11);
    top: calc(var(--sy) + var(--sh) * 0.42);
  }
  #map .lv-arrow.prev {
    left: calc(var(--sx) + var(--sw) * 0.16);
  }
  #map .lv-arrow.next {
    left: calc(var(--sx) + var(--sw) * 0.78);
  }
  html body #map .mp-cafe {
    left: calc(var(--sx) + var(--sw) * 0.42) !important;
    top: calc(var(--sy) + var(--sh) * 0.8) !important;
    width: calc(var(--sw) * 0.16) !important;
    height: calc(var(--sh) * 0.075) !important;
  }
  html body #map .map-logo {
    left: calc(var(--sx) + var(--sw) * 0.425) !important;
    top: calc(var(--sy) + var(--sh) * 0.015) !important;
    width: calc(var(--sw) * 0.15) !important;
  }
  #map .lv-panda {
    width: calc(var(--sw) * 0.12);
    left: calc(var(--sx) + var(--sw) * 0.055);
    top: calc(var(--sy) + var(--sh) * 0.6);
  }
  #map .lv-shadow {
    width: calc(var(--sw) * 0.09);
    height: calc(var(--sh) * 0.035);
    left: calc(var(--sx) + var(--sw) * 0.07);
    top: calc(var(--sy) + var(--sh) * 0.945);
  }
}
@media (prefers-reduced-motion: reduce) {
  #map .lv.cur,
  #map .lv-panda {
    animation: none;
  }
}
html body #map .lv-grid {
  right: auto !important;
  bottom: auto !important;
  left: calc(var(--mx) + var(--mw) * 0.215) !important;
  top: calc(var(--my) + var(--mh) * 0.235) !important;
  height: auto !important;
}
@media (min-aspect-ratio: 11/10) {
  html body #map .lv-grid {
    left: calc(var(--sx) + var(--sw) * 0.27) !important;
    top: calc(var(--sy) + var(--sh) * 0.27) !important;
  }
}
@media (max-aspect-ratio: 11/10) {
  html body #map .map-logo {
    top: max(calc(var(--my) + var(--mh) * 0.018), calc(clamp(46px, 8vmin, 150px) + 16px)) !important;
    width: calc(var(--mw) * 0.36) !important;
    left: calc(var(--mx) + var(--mw) * 0.32) !important;
  }
}
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-panda {
    left: max(6px, calc(var(--mx) + var(--mw) * 0.02)) !important;
  }
  html body #map .lv-shadow {
    left: max(18px, calc(var(--mx) + var(--mw) * 0.055)) !important;
  }
}
/* tablet: seta da página não encosta na pílula do café */
@media (max-aspect-ratio: 11/10) {
  html body #map .lv-arrow.next {
    left: calc(var(--mx) + var(--mw) * 0.71) !important;
  }
  html body #map .lv-arrow.prev {
    left: calc(var(--mx) + var(--mw) * 0.16) !important;
  }
  html body #map .mp-cafe {
    left: calc(var(--mx) + var(--mw) * 0.35) !important;
    width: calc(var(--mw) * 0.3) !important;
  }
}
/* ícones novos dos painéis: redondos, sem achatar */
#pause .opt img {
  object-fit: contain !important;
  height: 74% !important;
  width: auto !important;
  aspect-ratio: 1;
}

.intro-card .ic-rib {
  background-image: url(../assets/ui-faixa-rosa2.webp) !important;
  aspect-ratio: 4 !important;
  top: -13% !important;
}
.intro-card .ic-rib svg {
  top: 2% !important;
}
html body .intro-card .ic-panda {
  right: auto !important;
  bottom: auto !important;
  left: 62% !important;
  top: -27% !important;
  width: 30% !important;
  z-index: -2 !important;
  animation: none !important;
  filter: none !important;
}
html body .intro-card {
  isolation: isolate;
  margin-top: 3vh;
}
.intro-card .ic-mv {
  background: linear-gradient(#ffffff, #fff6e6) !important;
  border: 3px solid #d8b892 !important;
  border-radius: 16px !important;
  padding: 0.3em 1.1em 0.3em 0.5em !important;
  box-shadow: 0 4px 0 rgba(58, 36, 22, 0.18) !important;
  color: #4a2814;
}
.intro-card .ic-mv img {
  width: 1.8em !important;
  height: 1.8em !important;
  object-fit: contain;
  overflow: visible;
}
.intro-card .ic-rib svg {
  top: 10% !important;
}
/* lousa verde-menta clara (fundo alegre, 07/11): título em marrom, cadeados com sombra para destacar */
html body #map .lv-title {
  color: #5a3416 !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6) !important;
  font-weight: 900 !important;
}
#map .lv {
  filter: drop-shadow(0 3px 0 rgba(58, 36, 22, 0.25));
}

#panel:not([hidden]) {
  background: rgba(40, 22, 10, 0.42) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
#panel .win #panel-title,
#panel .win #panel-panda,
#panel .win .pn-tq,
#panel .win .st-tq,
#panel .win .pn-sp,
#panel .win .pn-halo,
#panel .win .pn-glow,
#panel .win .pn-raios {
  display: none !important;
}
html body #panel .win .stars {
  top: 5% !important;
  height: 24% !important;
  left: 18% !important;
  width: 64% !important;
  background: radial-gradient(
    closest-side,
    rgba(255, 232, 150, 0.75),
    rgba(255, 220, 120, 0.25) 60%,
    transparent
  ) !important;
}
html body #panel .win .stars i {
  width: calc(var(--cw) * 0.15) !important;
  height: calc(var(--cw) * 0.15) !important;
  position: relative;
  overflow: visible;
}
html body #panel .win .stars i:nth-child(2) {
  width: calc(var(--cw) * 0.19) !important;
  height: calc(var(--cw) * 0.19) !important;
  margin-top: -6%;
}
html body #panel .win .stars i.on {
  animation:
    starPop 0.6s var(--pop) both,
    starIdle 2.6s ease-in-out 0.7s infinite !important;
}

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