/* Latte Lane styles, part 2 of 5. The parts load in order: a rule in a later part overrides the same rule in an earlier one. */
#boosters .boost img {
  width: 78%;
  height: 78%;
}
@media (min-aspect-ratio: 11/10) {
  #hud .hud-logo {
    left: calc(var(--sx) + var(--sw) * 0.415);
    top: var(--sy);
    width: calc(var(--sw) * 0.165) !important;
  }
  #hud .bar {
    left: calc(var(--sx) + var(--sw) * 0.28);
    top: calc(var(--sy) + var(--sh) * 0.13);
    width: calc(var(--sw) * 0.46) !important;
    height: calc(var(--sh) * 0.135);
  }
  #hud .box {
    width: calc(var(--sw) * 0.073);
    height: calc(var(--sh) * 0.098);
  }
  #hud .box small {
    font-size: calc(var(--sh) * 0.024);
  }
  #hud .box b {
    font-size: calc(var(--sh) * 0.05) !important;
  }
  #hud .goals {
    height: calc(var(--sh) * 0.11);
  }
  #hud .goal img {
    width: calc(var(--sw) * 0.048) !important;
    height: calc(var(--sh) * 0.065) !important;
  }
  #hud .goal span {
    font-size: calc(var(--sh) * 0.036) !important;
  }
  #hud #panda {
    left: calc(var(--sx) + var(--sw) * 0.61);
    top: calc(var(--sy) + var(--sh) * 0.04);
    width: calc(var(--sw) * 0.133);
    height: calc(var(--sh) * 0.225);
  }
  body:not(.at-map):not(.at-home) #tip {
    top: calc(var(--sy) + var(--sh) * 0.27 - 2.6em) !important;
    width: calc(var(--sw) * 0.3);
    font-size: calc(var(--sh) * 0.026) !important;
  }
  #boosters {
    top: calc(var(--sy) + var(--sh) * 0.868) !important;
    left: calc(var(--sx) + var(--sw) * 0.398) !important;
    width: calc(var(--sw) * 0.195);
  }
  #boosters .boost {
    width: calc(var(--sw) * 0.083);
    height: calc(var(--sh) * 0.132);
  }
}
#hud .goals {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: calc(var(--sw) * 0.05) !important;
}
@media (min-aspect-ratio: 11/10) {
  #hud .goals {
    gap: calc(var(--sw) * 0.025) !important;
  }
}
/* ===== pausa no método de fidelidade: medidas de 05-pausa.json (painel 15.4/38.8/69.1/44.7 da coluna 9:16) ===== */
#pause {
  display: block !important;
  padding: 0 !important;
  background: rgba(40, 22, 10, 0.5) !important;
}
#pause[hidden] {
  display: none !important;
}
#pause .card {
  position: absolute;
  left: calc(var(--cx) + var(--cw) * 0.154);
  top: calc(var(--cy) + var(--ch) * 0.388);
  width: calc(var(--cw) * 0.691) !important;
  height: calc(var(--ch) * 0.447);
  padding: 0 !important;
  box-sizing: border-box;
  display: block;
  zoom: 1 !important;
  background: url(../assets/ui-painel.webp) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: 0 1vh 0 rgba(58, 36, 22, 0.35);
  border-radius: 6%;
}
#pause .card > * {
  position: absolute !important;
  margin: 0 !important;
}
#pause .pause-panda {
  left: 16.9%;
  top: -35.3%;
  width: 59.2% !important;
  z-index: 2;
}
#pause .pp-tq {
  top: -32.6%;
  width: 7.7%;
  z-index: 3;
}
#pause .pp-tq.l {
  left: 22.7%;
  transform: scaleX(-1);
}
#pause .pp-tq.r {
  left: 66.9%;
}
#pause .ribbon {
  left: 16.2%;
  top: -3.8%;
  width: 67.7%;
  min-width: 0 !important;
  height: 14.8%;
  padding: 0 !important;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  font-size: calc(var(--ch) * 0.05) !important;
  z-index: 3;
}
#pause .opt {
  left: 6.9%;
  width: 86.1%;
  height: 9.8%;
  box-sizing: border-box;
  padding: 0;
  background: url(../assets/ui-linha.webp) center / 100% 100% no-repeat;
  border: 0;
  font-size: calc(var(--ch) * 0.025);
}
#pause .opt:nth-of-type(1) {
  top: 14.3%;
}
#pause .opt:nth-of-type(2) {
  top: 26%;
}
#pause .opt:nth-of-type(3) {
  top: 37.4%;
}
#pause .opt:nth-of-type(4) {
  top: 49%;
}
#pause .opt img {
  position: absolute;
  left: 5.4%;
  top: 50%;
  height: 70%;
  width: 12%;
  object-fit: contain;
  transform: translateY(-50%);
}
#pause .opt {
  padding-left: 21% !important;
}
#pause .opt i {
  position: absolute;
  left: 77.1%;
  top: 50%;
  width: 18.8%;
  height: 72%;
  transform: translateY(-50%);
  margin: 0;
  border-radius: 999px;
  background: #c9bba8;
  border: 3px solid var(--ink);
  box-sizing: border-box;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35);
}
#pause .opt input:checked + i {
  background: linear-gradient(#8fd35a, #5fae35);
}
#pause .opt i::after {
  top: 50%;
  left: 4%;
  width: 46%;
  height: auto;
  aspect-ratio: 1;
  transform: translateY(-50%);
  box-sizing: border-box;
}
#pause .opt input:checked + i::after {
  transform: translate(105%, -50%);
}
#pause #pause-resume {
  left: 14.3%;
  top: 63.8%;
  width: 71.5%;
  height: 16.8%;
  padding: 0 !important;
  font-size: calc(var(--ch) * 0.044) !important;
}
#pause #pause-quit {
  left: 22.1%;
  top: 83.2%;
  width: 56%;
  height: 11.4%;
  padding: 0 !important;
  background: url(../assets/btn-creme.webp) center / 100% 100% no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: calc(var(--ch) * 0.027) !important;
  color: var(--ink);
}
#pause #pause-quit[hidden] {
  display: none;
}
/* ===== vitória e derrota no método de fidelidade (06-vitoria.json / 08-derrota.json, coluna 9:16) ===== */
#panel {
  display: block !important;
  padding: 0 !important;
  background: rgba(40, 22, 10, 0.5) !important;
  overflow: visible !important;
}
#panel[hidden] {
  display: none !important;
}
#panel .card {
  position: absolute;
  box-sizing: border-box;
  padding: 0 !important;
  display: block;
  zoom: 1 !important;
  background: url(../assets/ui-painel.webp) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: 0 1vh 0 rgba(58, 36, 22, 0.35);
  border-radius: 6%;
}
#panel .card::before {
  display: none !important;
}
#panel .card > *:not(.confetti) {
  position: absolute !important;
  margin: 0 !important;
}
#panel .wallet,
#panel .why {
  display: none !important;
}
#panel .pn-halo,
#panel .pn-glow,
#panel .pn-tq,
#panel .st-tq {
  display: none;
}
#panel #panel-panda {
  filter: none !important;
  background: none !important;
  padding: 0 !important;
  z-index: 2;
}
#panel .ribbon {
  min-width: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  z-index: 3;
}
#panel #panel-btn {
  padding: 0 !important;
}
#panel #panel-home {
  left: 0;
  right: 0;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ink);
  text-decoration: underline;
  font-weight: 900;
  -webkit-text-stroke: 0 !important;
}
/* vitória: painel 10.6/39.5/78.6/49.6 */
#panel .card.win {
  left: calc(var(--cx) + var(--cw) * 0.106);
  top: calc(var(--cy) + var(--ch) * 0.395);
  width: calc(var(--cw) * 0.786) !important;
  height: calc(var(--ch) * 0.496);
}
#panel .win .pn-glow {
  display: block;
  left: 6.7%;
  top: -32.7%;
  width: 87.9%;
  height: 39.7%;
  object-fit: fill;
  opacity: 0.9;
  animation: spin 14s linear infinite;
  z-index: 1;
}
#panel .win #panel-panda {
  left: 18.3%;
  top: -32.7%;
  width: 53.4% !important;
}
#panel .win .pn-tq {
  display: block;
  top: -32%;
  width: 7.4%;
  z-index: 3;
}
#panel .win .pn-tq.l {
  left: 21.1%;
  transform: scaleX(-1);
}
#panel .win .pn-tq.r {
  left: 66%;
}
#panel .win .ribbon {
  left: 10.2%;
  top: -4.2%;
  width: 80.4%;
  height: 16.9%;
  font-size: calc(var(--ch) * 0.058) !important;
}
#panel .win .stars {
  left: 23.7%;
  top: 7.5%;
  width: 52%;
  height: 22%;
  padding: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: radial-gradient(closest-side, rgba(255, 214, 110, 0.6), transparent);
}
#panel .win .stars i {
  width: calc(var(--cw) * 0.124) !important;
  height: calc(var(--ch) * 0.069) !important;
}
#panel .win .stars i:nth-child(2) {
  width: calc(var(--cw) * 0.149) !important;
  height: calc(var(--ch) * 0.087) !important;
}
#panel .win .st-tq {
  display: block;
  top: 16.5%;
  width: 8.5%;
  z-index: 2;
}
#panel .win .st-tq.l {
  left: 11.6%;
  transform: scaleX(-1);
}
#panel .win .st-tq.r {
  left: 79.1%;
}
#panel .win #panel-text {
  left: 6.7%;
  top: 30.6%;
  width: 87.1%;
  height: 14.5%;
  display: flex;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
}
#panel .win .earn {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 0 3%;
  background: url(../assets/ui-linha.webp) center / 100% 100% no-repeat !important;
  border: 0 !important;
  font-size: calc(var(--ch) * 0.03) !important;
  font-weight: 900;
}
#panel .win .earn.coin {
  width: 45.5%;
}
#panel .win .earn.gift {
  width: 51.3%;
}
#panel .win .earn img {
  width: auto !important;
  height: 82% !important;
  filter: none !important;
}
#panel .win #cafe-box {
  left: 6.1%;
  top: 47%;
  width: 87.9%;
  height: 26%;
  box-sizing: border-box;
  padding: 0 3% 0 0;
  background: url(../assets/ui-linha.webp) center / 100% 100% no-repeat;
  box-shadow: none;
}
#panel .win #cafe-box canvas {
  width: 46%;
  height: 108%;
  transform: rotate(-3deg);
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--ink);
}
#panel .win #panel-btn {
  left: 22.8%;
  top: 74.2%;
  width: 54.1%;
  height: 15.1%;
  font-size: calc(var(--ch) * 0.046) !important;
}
#panel .win #panel-home {
  top: 90%;
  font-size: calc(var(--ch) * 0.025);
}
/* derrota: painel 8.5/31.1/83.1/61 */
#panel .card.lose {
  left: calc(var(--cx) + var(--cw) * 0.085);
  top: calc(var(--cy) + var(--ch) * 0.311);
  width: calc(var(--cw) * 0.831) !important;
  height: calc(var(--ch) * 0.61);
}
#panel .lose .pn-halo {
  display: block;
  left: 25%;
  top: 2%;
  width: 50%;
  z-index: 1;
}
#panel .lose #panel-panda {
  left: 23.1%;
  top: 3.4%;
  width: 47.8% !important;
  z-index: 2;
  clip-path: inset(0 0 12% 0);
}
#panel .lose .ribbon {
  left: 15.3%;
  top: -8.9%;
  width: 69.7%;
  height: 18.7%;
  font-size: calc(var(--ch) * 0.046) !important;
}
#panel .lose .pn-tq.l {
  display: block;
  left: 23.7%;
  top: -13.3%;
  width: 9.9%;
  transform: scaleX(-1);
  z-index: 3;
}
#panel .lose #panel-text {
  left: 6.1%;
  top: 31.8%;
  width: 87.5%;
  height: 27.7%;
  display: block;
  background: url(../assets/ui-linha.webp) center / 100% 100% no-repeat;
  z-index: 3;
}
#panel .lose .need {
  position: absolute;
  left: 0;
  right: 0;
  top: 7%;
  text-align: center;
  font-weight: 900;
  font-size: calc(var(--ch) * 0.028);
}
#panel .lose .earn {
  position: absolute;
  top: 30.8%;
  width: 33.1%;
  height: 61%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  padding: 0 !important;
  border-radius: 16px;
  background: #fff7e8 !important;
  border: 2.5px solid #e2c39a !important;
  font-size: calc(var(--ch) * 0.032) !important;
  font-weight: 900;
}
#panel .lose .earn:nth-child(2) {
  left: 14.2%;
}
#panel .lose .earn:nth-child(3) {
  left: 52.7%;
}
#panel .lose .earn:nth-child(2):last-child {
  left: 33.5%;
}
#panel .lose .earn img {
  width: auto !important;
  height: 48% !important;
}
#panel .lose #more {
  left: 11.8%;
  top: 61.8%;
  width: 75.8%;
  height: 15.1%;
  padding: 0 0 0 28% !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--ch) * 0.034) !important;
  line-height: 1.05;
}
#panel .lose #more[hidden] {
  display: none;
}
#panel .lose #more .more-ico {
  left: 6% !important;
  width: 26% !important;
  height: auto !important;
  aspect-ratio: 1;
}
#panel .lose #more span {
  background: none;
  padding: 0;
  font-size: inherit;
}
#panel .lose #more em {
  flex-direction: row;
}
#panel .lose #panel-btn {
  left: 18.2%;
  top: 78.7%;
  width: 62.8%;
  height: 13.1%;
  font-size: calc(var(--ch) * 0.044) !important;
}
#panel .lose #panel-home {
  top: 93.5%;
  font-size: calc(var(--ch) * 0.025);
}
#panel .lose .stars,
#panel .lose #cafe-box {
  display: none !important;
}
/* ===== café reformado no método de fidelidade (07-cafe-reformado.json, coluna 9:16) ===== */
#cafe-screen {
  display: block !important;
  padding: 0 !important;
  background: url(../assets/fundo-retrato.webp) center / cover !important;
}
#cafe-screen[hidden] {
  display: none !important;
}
#cafe-screen > *,
#cafe-screen .cafe-foot > * {
  position: fixed !important;
  margin: 0 !important;
  transform: none;
}
#cafe-screen .cafe-foot {
  position: static !important;
  display: contents;
}
body.at-cafe #hud .bar {
  top: calc(var(--cy) + var(--ch) * 0.133);
}
body.at-cafe #hud #panda {
  top: calc(var(--cy) + var(--ch) * 0.087);
}
body.at-cafe .panda {
  visibility: visible !important;
}
#cafe-title {
  left: calc(var(--cx) + var(--cw) * 0.175);
  top: calc(var(--cy) + var(--ch) * 0.269);
  width: calc(var(--cw) * 0.654);
  min-width: 0 !important;
  height: calc(var(--ch) * 0.102);
  box-sizing: border-box;
  padding: 0 !important;
  display: grid;
  place-items: center;
  font-size: calc(var(--ch) * 0.044) !important;
  z-index: 3;
}
.cf-tq {
  width: calc(var(--cw) * 0.07);
  z-index: 3;
}
.cf-tq.l {
  left: calc(var(--cx) + var(--cw) * 0.405);
  top: calc(var(--cy) + var(--ch) * 0.228);
  transform: scaleX(-1) rotate(-20deg) !important;
}
.cf-tq.r {
  left: calc(var(--cx) + var(--cw) * 0.525);
  top: calc(var(--cy) + var(--ch) * 0.228);
  transform: rotate(-20deg) !important;
}
.cf-tq.p {
  left: calc(var(--cx) + var(--cw) * 0.351);
  top: calc(var(--cy) + var(--ch) * 0.67);
}
#cafe-screen .cafe-frame {
  left: var(--cx);
  top: calc(var(--cy) + var(--ch) * 0.344);
  width: var(--cw);
  height: calc(var(--ch) * 0.41);
  border: 0;
  border-top: 4px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 6px 0 rgba(58, 36, 22, 0.3);
}
#cafe-screen .cafe-frame canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#cafe-screen .cafe-panda {
  left: calc(var(--cx) + var(--cw) * 0.048);
  top: calc(var(--cy) + var(--ch) * 0.664);
  width: calc(var(--cw) * 0.356) !important;
  z-index: 3;
}
#cafe-screen .cafe-prog {
  left: calc(var(--cx) + var(--cw) * 0.399);
  top: calc(var(--cy) + var(--ch) * 0.758);
  width: calc(var(--cw) * 0.531);
  height: calc(var(--ch) * 0.085);
  box-sizing: border-box;
  padding: 0 4% 0 calc(var(--cw) * 0.2) !important;
  background: url(../assets/ui-linha.webp) center / 100% 100% no-repeat !important;
  border: 0 !important;
  font-size: calc(var(--ch) * 0.028);
}
#cafe-screen .cafe-prog img {
  position: absolute;
  left: 6%;
  top: 50%;
  width: 18% !important;
  transform: translateY(-50%);
}
#cafe-screen .cafe-prog b {
  display: block;
  text-align: center;
}
#cafe-go {
  left: calc(var(--cx) + var(--cw) * 0.278) !important;
  top: calc(var(--cy) + var(--ch) * 0.879);
  bottom: auto !important;
  width: calc(var(--cw) * 0.431) !important;
  height: calc(var(--ch) * 0.084);
  padding: 0 !important;
  font-size: calc(var(--ch) * 0.044) !important;
}

#hud .hud-logo {
  left: calc(var(--sx) + var(--sw) * 0.3);
  width: calc(var(--sw) * 0.4) !important;
}
#hud .box.lv::before,
#hud .box.lv::after {
  background: #6b3a1a;
  border-color: #3a2416;
}
.box.mv {
  background: linear-gradient(#ffa9c9, #f06aa0) !important;
}
#panda-tq {
  position: fixed;
  left: calc(var(--sx) + var(--sw) * 0.925);
  top: calc(var(--sy) + var(--sh) * 0.135);
  width: calc(var(--sw) * 0.053);
  z-index: 3;
}
body:not(.at-map):not(.at-home) #tip::before,
body:not(.at-map):not(.at-home) #tip::after {
  content: '';
  position: absolute;
  top: -45%;
  width: 8%;
  height: 60%;
  background: url(../assets/ui-tiques-d.webp) center / contain no-repeat;
}
body:not(.at-map):not(.at-home) #tip::before {
  left: -7%;
  transform: scaleX(-1);
}
body:not(.at-map):not(.at-home) #tip::after {
  right: -7%;
}
#tip {
  font-size: calc(var(--sh) * 0.019) !important;
  white-space: nowrap;
}
@media (min-aspect-ratio: 11/10) {
  #hud .hud-logo {
    left: calc(var(--sx) + var(--sw) * 0.415);
    width: calc(var(--sw) * 0.165) !important;
  }
  #panda-tq {
    left: calc(var(--sx) + var(--sw) * 0.615);
    top: calc(var(--sy) + var(--sh) * 0.04);
    width: calc(var(--sw) * 0.035);
  }
}

body {
  background: #e9d6bd !important;
}
body.at-home {
  background: #cfe6f5 !important;
}
#cafe-screen {
  background: none !important;
}
#frente-mesa,
#frente-cadeira {
  display: none !important;
}
@media (min-aspect-ratio: 11/10) {
  body,
  body.at-home {
    background: #e9d6bd !important;
  }
  #home:not([hidden]) {
    left: calc(var(--sx) + var(--sw) * 0.32) !important;
    top: calc(var(--sy) + var(--sh) * 0.013) !important;
    width: calc(var(--sw) * 0.357) !important;
    height: calc(var(--sh) * 0.974) !important;
    inset: auto;
    transform: none !important;
    background: url(../assets/fundo-inicio.webp) center / cover !important;
    border: 6px solid #fff3dc !important;
    box-shadow:
      0 0 0 3px var(--ink),
      0 1.4vh 3vh rgba(60, 30, 10, 0.35) !important;
    border-radius: 28px !important;
  }
}
body:not(.at-map):not(.at-home) #tip {
  width: auto !important;
  min-width: calc(var(--sw) * 0.67);
  padding: 0 calc(var(--sw) * 0.04) !important;
  font-size: calc(var(--sh) * 0.0185) !important;
}
#pause .opt {
  font-size: calc(var(--ch) * 0.021) !important;
}
#panel .win .earn {
  font-size: calc(var(--ch) * 0.026) !important;
  white-space: nowrap;
}
/* ===== 1º tempo da vitória: faixa de nuvem (11-desktop-vitoria.json) ===== */
#celebrate {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: rgba(40, 22, 10, 0.22);
  animation: cbIn 0.25s ease-out;
}
#celebrate[hidden] {
  display: none;
}
@keyframes cbIn {
  from {
    opacity: 0;
  }
}
#celebrate > * {
  position: fixed;
}
.cb-glow {
  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);
  object-fit: fill;
  animation: spin 10s linear infinite;
}
.cb-panda {
  left: calc(var(--sx) + var(--sw) * 0.415);
  top: calc(var(--sy) + var(--sh) * 0.3);
  width: calc(var(--sw) * 0.165);
  animation: cbPop 0.5s var(--pop) both;
}
.cb-tq {
  width: calc(var(--sw) * 0.036);
}
.cb-tq.l {
  left: calc(var(--sx) + var(--sw) * 0.38);
  top: calc(var(--sy) + var(--sh) * 0.38);
  transform: scaleX(-1);
}
.cb-tq.r {
  left: calc(var(--sx) + var(--sw) * 0.545);
  top: calc(var(--sy) + var(--sh) * 0.315);
}
.cb-sp {
  width: calc(var(--sw) * 0.03);
  animation: twinkle 1s ease-in-out infinite;
}
.cb-sp.a {
  left: calc(var(--sx) + var(--sw) * 0.332);
  top: calc(var(--sy) + var(--sh) * 0.415);
}
.cb-sp.b {
  left: calc(var(--sx) + var(--sw) * 0.355);
  top: calc(var(--sy) + var(--sh) * 0.45);
  animation-delay: 0.3s;
}
.cb-sp.c {
  left: calc(var(--sx) + var(--sw) * 0.645);
  top: calc(var(--sy) + var(--sh) * 0.445);
  animation-delay: 0.6s;
}
.cb-cf {
  width: calc(var(--sw) * 0.02);
  height: calc(var(--sh) * 0.045);
  border-radius: 3px;
  border: 2px solid var(--ink);
  animation: cbFall 1.6s ease-in both;
}
.cb-cf.a {
  left: calc(var(--sx) + var(--sw) * 0.282);
  top: calc(var(--sy) + var(--sh) * 0.445);
  background: #f48fb0;
  transform: rotate(-25deg);
}
.cb-cf.b {
  left: calc(var(--sx) + var(--sw) * 0.26);
  top: calc(var(--sy) + var(--sh) * 0.54);
  background: #ffd84a;
  transform: rotate(20deg);
}
.cb-cf.c {
  left: calc(var(--sx) + var(--sw) * 0.615);
  top: calc(var(--sy) + var(--sh) * 0.45);
  background: #f48fb0;
  transform: rotate(30deg);
}
.cb-cf.d {
  left: calc(var(--sx) + var(--sw) * 0.7);
  top: calc(var(--sy) + var(--sh) * 0.49);
  background: #9fcf6e;
  transform: rotate(-15deg);
}
@keyframes cbFall {
  0% {
    opacity: 0;
    translate: 0 -30px;
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    translate: 0 10px;
  }
}
.cb-banner {
  left: calc(var(--sx) + var(--sw) * 0.298);
  top: calc(var(--sy) + var(--sh) * 0.5);
  width: calc(var(--sw) * 0.402);
  height: calc(var(--sh) * 0.175);
  display: grid;
  place-items: center;
  background: url(../assets/ui-faixa-nuvem.webp) center / 100% 100% no-repeat;
  animation: cbPop 0.45s 0.1s var(--pop) both;
}
.cb-banner span {
  font-size: calc(var(--sh) * 0.12);
  font-weight: 900;
  color: #5a3416;
  -webkit-text-stroke: 3px #3a2416;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-8%);
}
@keyframes cbPop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
/* em pé: o mesmo grupo centrado no tabuleiro */
@media (max-aspect-ratio: 11/10) {
  .cb-glow {
    left: var(--cx);
    top: calc(var(--cy) + var(--ch) * 0.3);
    width: var(--cw);
    height: calc(var(--ch) * 0.42);
  }
  .cb-panda {
    left: calc(var(--cx) + var(--cw) * 0.28);
    top: calc(var(--cy) + var(--ch) * 0.33);
    width: calc(var(--cw) * 0.44);
  }
  .cb-tq {
    width: calc(var(--cw) * 0.09);
  }
  .cb-tq.l {
    left: calc(var(--cx) + var(--cw) * 0.2);
    top: calc(var(--cy) + var(--ch) * 0.4);
  }
  .cb-tq.r {
    left: calc(var(--cx) + var(--cw) * 0.7);
    top: calc(var(--cy) + var(--ch) * 0.34);
  }
  .cb-sp {
    width: calc(var(--cw) * 0.07);
  }
  .cb-sp.a {
    left: calc(var(--cx) + var(--cw) * 0.1);
    top: calc(var(--cy) + var(--ch) * 0.45);
  }
  .cb-sp.b {
    left: calc(var(--cx) + var(--cw) * 0.16);
    top: calc(var(--cy) + var(--ch) * 0.5);
  }
  .cb-sp.c {
    left: calc(var(--cx) + var(--cw) * 0.85);
    top: calc(var(--cy) + var(--ch) * 0.47);
  }
  .cb-cf {
    width: calc(var(--cw) * 0.04);
    height: calc(var(--ch) * 0.025);
  }
  .cb-cf.a {
    left: calc(var(--cx) + var(--cw) * 0.05);
    top: calc(var(--cy) + var(--ch) * 0.44);
  }
  .cb-cf.b {
    left: calc(var(--cx) + var(--cw) * 0.1);
    top: calc(var(--cy) + var(--ch) * 0.58);
  }
  .cb-cf.c {
    left: calc(var(--cx) + var(--cw) * 0.82);
    top: calc(var(--cy) + var(--ch) * 0.42);
  }
  .cb-cf.d {
    left: calc(var(--cx) + var(--cw) * 0.9);
    top: calc(var(--cy) + var(--ch) * 0.56);
  }
  .cb-banner {
    left: calc(var(--cx) + var(--cw) * 0.04);
    top: calc(var(--cy) + var(--ch) * 0.49);
    width: calc(var(--cw) * 0.92);
    height: calc(var(--ch) * 0.13);
  }
  .cb-banner span {
    font-size: calc(var(--ch) * 0.065);
  }
}
.cb-glow {
  background: radial-gradient(
    closest-side,
    rgba(255, 240, 160, 0.95),
    rgba(255, 214, 110, 0.55) 45%,
    rgba(255, 214, 110, 0)
  );
  border-radius: 50%;
}
.cb-banner span {
  font-size: calc(var(--sh) * 0.092);
}
@media (max-aspect-ratio: 11/10) {
  .cb-banner span {
    font-size: calc(var(--ch) * 0.052);
  }
}

@media (max-aspect-ratio: 11/10) {
  body:not(.tip-on) #hud .bar {
    top: calc(var(--sy) + var(--sh) * 0.135);
  }
  body:not(.tip-on) #hud #panda {
    left: calc(var(--sx) + var(--sw) * 0.68);
    top: calc(var(--sy) + var(--sh) * 0.084);
    width: calc(var(--sw) * 0.313);
    height: calc(var(--sh) * 0.156);
  }
  body:not(.tip-on) #panda-tq {
    left: calc(var(--sx) + var(--sw) * 0.707);
    top: calc(var(--sy) + var(--sh) * 0.075);
  }
}

#pause .ribbon,
#panel .ribbon {
  background: url(../assets/ui-fita-rabo.webp) center / 100% 100% no-repeat !important;
  padding-bottom: 3% !important;
  align-content: start;
  padding-top: 2.2% !important;
}
#cafe-title {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 1.5% !important;
  align-content: start;
}
#cafe-title::before {
  display: block !important;
  content: '';
  position: absolute;
  z-index: -1;
  left: -13.7%;
  right: -14.4%;
  top: 0;
  bottom: 0;
  background: url(../assets/ui-faixa-laranja2.webp) center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
#cafe-title {
  isolation: isolate;
}
.cf-fl {
  display: none !important;
}
#panel .win .ribbon {
  left: 6%;
  width: 88%;
  height: 19%;
  top: -5%;
}
#pause .ribbon {
  left: 13%;
  width: 74%;
  height: 17%;
}
#panel .lose .ribbon {
  left: 11%;
  width: 78%;
  height: 21%;
}

body.modal #hud #panda {
  visibility: visible !important;
}
/* vitória: brilho forte atrás da mascote, brilhinhos e auréola das estrelas */
#panel .win .pn-glow {
  background: radial-gradient(
    closest-side,
    rgba(255, 240, 160, 0.95),
    rgba(255, 214, 110, 0.6) 45%,
    rgba(255, 214, 110, 0)
  );
  border-radius: 50%;
  opacity: 1;
}
#panel .win .stars {
  background: radial-gradient(
    closest-side,
    rgba(255, 226, 130, 0.9),
    rgba(255, 214, 110, 0.35) 60%,
    transparent
  ) !important;
}
#panel .pn-sp {
  display: none;
}
#panel .win .pn-sp {
  display: block;
  width: 6%;
  z-index: 3;
  animation: twinkle 1.2s ease-in-out infinite;
}
#panel .win .pn-sp.a {
  left: 9%;
  top: -24%;
}
#panel .win .pn-sp.b {
  left: 86%;
  top: -26%;
  animation-delay: 0.3s;
}
#panel .win .pn-sp.c {
  left: 4%;
  top: 14%;
  animation-delay: 0.6s;
}
#panel .win .pn-sp.d {
  left: 90%;
  top: 12%;
  animation-delay: 0.9s;
}
#panel .win .pn-sp.e {
  left: 76%;
  top: -10%;
  width: 4%;
  animation-delay: 0.45s;
}
#panel .win .cafe-bar {
  position: relative;
  height: 22% !important;
}
#panel .win .cafe-bar em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 900;
  font-size: calc(var(--ch) * 0.02);
  color: var(--ink);
}
#panel .lose .cafe-bar em {
  display: none;
}
/* café: brilhinhos na mascote e no progresso */
.cf-msp,
.cf-psp {
  width: calc(var(--cw) * 0.045);
  animation: twinkle 1.3s ease-in-out infinite;
  z-index: 4;
}
.cf-msp.a {
  left: calc(var(--cx) + var(--cw) * 0.053);
  top: calc(var(--cy) + var(--ch) * 0.697);
}
.cf-msp.b {
  left: calc(var(--cx) + var(--cw) * 0.09);
  top: calc(var(--cy) + var(--ch) * 0.736);
  width: calc(var(--cw) * 0.03);
  animation-delay: 0.4s;
}
.cf-msp.c {
  left: calc(var(--cx) + var(--cw) * 0.399);
  top: calc(var(--cy) + var(--ch) * 0.731);
  animation-delay: 0.8s;
}
#cafe-screen .cafe-prog .cf-psp {
  position: absolute;
  left: 21%;
  top: 8%;
  width: 7% !important;
  transform: none;
}

body.at-home .topbar .coin-pill {
  font-size: min(2.6vh, 23px) !important;
}
.coin-ticks {
  height: 3%;
  width: auto;
}
.play-ticks.l {
  height: 5.4%;
  width: auto !important;
}
.play-ticks.r {
  height: 5.1%;
  width: auto !important;
}
.mp-cafe .tq.l {
  height: 70%;
  width: auto;
}
.mp-cafe .tq.r {
  height: 60%;
  width: auto;
}
.mp-cafe .shop {
  height: 112%;
  width: auto;
}
.map-dust {
  height: 2.4%;
  width: auto;
}
.mp-bar .box.mv {
  width: 21%;
}
#pause .ribbon {
  left: 16.2%;
  width: 67.7%;
  height: 14.8%;
  top: -3.8%;
}
#panel .win .ribbon {
  left: 10.2%;
  width: 80.4%;
  height: 16.9%;
  top: -4.2%;
}
#panel .lose .ribbon {
  left: 15.3%;
  width: 69.7%;
  height: 18.7%;
  top: -8.9%;
}
#panel .win #cafe-box {
  height: 23.6%;
}
.cb-glow,
#panel .win .pn-glow {
  animation: none !important;
}
@media (min-aspect-ratio: 11/10) {
  #home #play {
    left: 16.8%;
    top: 77.7%;
    width: 65.8% !important;
    height: 16.4%;
  }
}

.coin-ticks {
  width: 6.4% !important;
  height: 3% !important;
  object-fit: fill;
}
.play-ticks.r {
  width: 7.4% !important;
  object-fit: fill;
}
.mp-cafe .tq.l {
  width: 16.3% !important;
  height: 45% !important;
  object-fit: fill;
}
.mp-cafe .tq.r {
  width: 14.8% !important;
  height: 40% !important;
  object-fit: fill;
}
.map-dust {
  width: 5.3% !important;
  height: 2.4% !important;
  object-fit: fill;
}
.mp-bar .goal img {
  width: min(10.6vw, 55px) !important;
  height: min(4.2vh, 40px) !important;
  object-fit: contain;
}
.mp-cafe .shop {
  height: 100% !important;
}
@media (max-aspect-ratio: 11/10) {
  body.modal #hud #panda {
    left: calc(var(--sx) + var(--sw) * 0.717);
    width: calc(var(--sw) * 0.271) !important;
  }
}
@media (min-aspect-ratio: 11/10) {
  #hud .bar,
  #hud #panda {
    transition: all 0.3s ease-out;
  }
  body.celebrating #hud .bar {
    left: calc(var(--sx) + var(--sw) * 0.3);
    top: calc(var(--sy) + var(--sh) * 0.11);
    width: calc(var(--sw) * 0.295) !important;
    height: calc(var(--sh) * 0.113);
  }
  body.celebrating #hud #panda {
    left: calc(var(--sx) + var(--sw) * 0.588);
    top: calc(var(--sy) + var(--sh) * 0.035);
    width: calc(var(--sw) * 0.113);
    height: calc(var(--sh) * 0.2);
  }
  .cb-panda {
    height: calc(var(--sh) * 0.25);
    width: auto;
  }
}
/* ===== âncoras para outros aparelhos (iPhone, tablet): cada grupo preso na sua borda ===== */
#hud .hud-logo,
#hud .bar,
#tip {
  --sy: var(--syT);
}
#hud #panda,
#panda-tq {
  --sy: var(--syT);
  --sx: var(--sxR);
}
#boosters {
  --sy: var(--syB);
}
#cafe-title,
.cf-tq.l,
.cf-tq.r,
body.at-cafe #hud .bar,
body.at-cafe #hud #panda {
  --cy: var(--cyT);
}
.cafe-panda,
.cf-msp,
.cf-tq.p,
.cafe-prog,
#cafe-go {
  --cy: var(--cyB);
}
.cafe-panda,
.cf-msp.a,
.cf-msp.b {
  --cx: var(--cxL);
}
/* início e mapa: coluna 9:16 com âncoras (medidas de 01-inicio.json / 02-mapa.json); no computador a coluna fica no meio do cenário largo (07/11) */
@media all {
  #home > * {
    position: fixed !important;
  }
  #home .home-logo {
    left: calc(var(--cx) + var(--cw) * 0.239);
    top: calc(var(--cyT) + var(--ch) * 0.075);
    width: calc(var(--cw) * 0.61) !important;
  }
  #home .home-panda {
    left: calc(var(--cx) + var(--cw) * 0.25);
    top: calc(var(--cy) + var(--ch) * 0.467);
    width: calc(var(--cw) * 0.452) !important;
  }
  #home .home-shadow {
    left: calc(var(--cx) + var(--cw) * 0.319);
    top: calc(var(--cy) + var(--ch) * 0.7);
    width: calc(var(--cw) * 0.351) !important;
    height: calc(var(--ch) * 0.036) !important;
  }
  #home .home-ticks {
    left: calc(var(--cx) + var(--cw) * 0.606);
    top: calc(var(--cy) + var(--ch) * 0.467);
    width: calc(var(--cw) * 0.09) !important;
    height: auto;
  }
  #home .play-ticks.l {
    left: calc(var(--cx) + var(--cw) * 0.112);
    top: calc(var(--cyB) + var(--ch) * 0.763);
    width: calc(var(--cw) * 0.08) !important;
    height: calc(var(--ch) * 0.054) !important;
  }
  #home .play-ticks.r {
    left: calc(var(--cx) + var(--cw) * 0.797);
    top: calc(var(--cyB) + var(--ch) * 0.766);
    width: calc(var(--cw) * 0.074) !important;
    height: calc(var(--ch) * 0.051) !important;
  }
  #home #play {
    left: calc(var(--cx) + var(--cw) * 0.191);
    top: calc(var(--cyB) + var(--ch) * 0.749);
    width: calc(var(--cw) * 0.604) !important;
    height: calc(var(--ch) * 0.132) !important;
    font-size: calc(var(--ch) * 0.084) !important;
  }
  #home .home-level {
    left: calc(var(--cx) + var(--cw) * 0.303);
    top: calc(var(--cyB) + var(--ch) * 0.893);
    width: calc(var(--cw) * 0.367) !important;
    height: calc(var(--ch) * 0.063) !important;
    font-size: calc(var(--ch) * 0.034);
  }
  body.at-home .topbar .coin-pill {
    left: calc(var(--cxL) + var(--cw) * 0.053);
    top: calc(var(--cyT) + var(--ch) * 0.031);
    width: calc(var(--cw) * 0.335) !important;
    height: calc(var(--ch) * 0.053) !important;
    font-size: calc(var(--ch) * 0.026) !important;
  }
  body.at-home .coin-ticks {
    left: calc(var(--cxL) + var(--cw) * 0.019);
    top: calc(var(--cyT) + var(--ch) * 0.009);
    width: calc(var(--cw) * 0.064) !important;
    height: calc(var(--ch) * 0.03) !important;
  }
  body.at-home .topbar .gear {
    left: calc(var(--cxR) + var(--cw) * 0.834);
    top: calc(var(--cyT) + var(--ch) * 0.016);
    width: calc(var(--cw) * 0.136) !important;
    height: calc(var(--ch) * 0.077) !important;
  }
  body.at-home {
    background: #cfe6f5 !important;
  }
}
#map {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  transform: none !important;
  border: 0 !important;
  background: none !important;
}
#map .mp-gear {
  position: fixed;
  left: calc(var(--cxL) + var(--cw) * 0.027);
  top: calc(var(--cyT) + var(--ch) * 0.017);
  width: calc(var(--cw) * 0.115) !important;
  height: calc(var(--ch) * 0.065) !important;
}
#map .mp-gift {
  position: fixed;
  left: calc(var(--cxR) + var(--cw) * 0.859);
  top: calc(var(--cyT) + var(--ch) * 0.017);
  width: calc(var(--cw) * 0.115) !important;
  height: calc(var(--ch) * 0.065) !important;
}
#map .map-logo {
  position: fixed;
  left: calc(var(--cx) + var(--cw) * 0.3);
  top: calc(var(--cyT) + var(--ch) * 0.006);
  width: calc(var(--cw) * 0.4) !important;
  transform: none !important;
}
#map .mp-bar {
  position: fixed !important;
  left: calc(var(--cx) + var(--cw) * 0.106);
  top: calc(var(--cyT) + var(--ch) * 0.121);
  width: calc(var(--cw) * 0.786) !important;
  height: calc(var(--ch) * 0.097) !important;
}
#map .mp-cafe {
  position: fixed;
  left: calc(var(--cx) + var(--cw) * 0.303);
  top: calc(var(--cyT) + var(--ch) * 0.24);
  width: calc(var(--cw) * 0.393) !important;
  height: calc(var(--ch) * 0.067) !important;
  font-size: calc(var(--ch) * 0.027);
}
#map .mp-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: calc(var(--cyB) + var(--ch) * 0.864);
  bottom: auto;
  height: calc(var(--ch) * 0.136);
}
#map .mp-tab,
#map .mp-play {
  width: auto;
  aspect-ratio: auto;
}
#map .mp-tab {
  width: calc(var(--cw) * 0.153);
}
#map .mp-play {
  width: calc(var(--cw) * 0.264);
}
#map #tab-helpers {
  left: calc(var(--cx) + var(--cw) * 0.027);
}
#map #tab-coins {
  left: calc(var(--cx) + var(--cw) * 0.2);
}
#map #map-play {
  left: calc(var(--cx) + var(--cw) * 0.367);
}
#map #tab-stars {
  left: calc(var(--cx) + var(--cw) * 0.648);
}
#map #tab-cafe {
  left: calc(var(--cx) + var(--cw) * 0.82);
}
#map .mnode b {
  font-size: calc(var(--ch) * 0.034);
}
#map .mnode.cur b {
  font-size: calc(var(--ch) * 0.04);
}
#map .mp-bar .box small {
  font-size: calc(var(--ch) * 0.015);
}
#map .mp-bar .box b {
  font-size: calc(var(--ch) * 0.036);
}
#map .mp-bar .goal span {
  font-size: calc(var(--ch) * 0.023);
}
#map .mp-tab span {
  font-size: calc(var(--ch) * 0.02);
}
#map .mp-play span {
  font-size: calc(var(--ch) * 0.037);
}
/* ===== arte sem deformar: 9 fatias numa camada ::after (pontas e cantos na proporção do arquivo; só o meio estica) ===== */
.btn:not(.ghost),
#pause #pause-quit,
#home .home-level,
#pause .opt,
#panel .win .earn,
#panel .win #cafe-box,
#cafe-screen .cafe-prog,
#panel .lose #panel-text,
#pause .card,
#panel .card,
#map .mp-tab {
  background: none !important;
  isolation: isolate;
}
.btn:not(.ghost)::after,
#pause #pause-quit::after,
#home .home-level::after,
#pause .opt::after,
#panel .win .earn::after,
#panel .win #cafe-box::after,
#cafe-screen .cafe-prog::after,
#panel .lose #panel-text::after,
#pause .card::after,
#panel .card::after,
#map .mp-tab::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: solid transparent;
  box-sizing: border-box;
}
.btn:not(.ghost)::after {
  border-width: 0 calc(var(--bh, 60px) * 0.5);
  border-image: url(../assets/btn-laranja.webp) 0 18% fill / 0 calc(var(--bh, 60px) * 0.5) stretch;
}
.btn.more::after {
  border-image-source: url(../assets/btn-verde.webp);
}
#pause #pause-quit::after,
#home .home-level::after {
  border-width: 0 calc(var(--bh, 40px) * 0.5);
  border-image: url(../assets/btn-creme.webp) 0 17% fill / 0 calc(var(--bh, 40px) * 0.5) stretch;
}
#pause .opt::after,
#panel .win .earn::after,
#panel .win #cafe-box::after,
#cafe-screen .cafe-prog::after,
#panel .lose #panel-text::after {
  border-width: calc(var(--ch) * 0.013) calc(var(--ch) * 0.016);
  border-image: url(../assets/ui-linha.webp) 30% 12% fill / calc(var(--ch) * 0.013) calc(var(--ch) * 0.016) stretch;
}
#pause .card::after,
#panel .card::after {
  border-width: calc(var(--cw) * 0.05);
  border-image: url(../assets/ui-painel.webp) 12% fill / calc(var(--cw) * 0.05) stretch;
}
#map .mp-tab::after {
  border-width: calc(var(--cw) * 0.035);
  border-image: url(../assets/ui-aba.webp) 25% fill / calc(var(--cw) * 0.035) stretch;
}
#pause .card::before,
#panel .card::before {
  z-index: -2;
}

#home #play {
  --bh: calc(var(--ch) * 0.132);
}
#home .home-level {
  --bh: calc(var(--ch) * 0.063);
}
#pause #pause-resume {
  --bh: calc(var(--ch) * 0.075);
}
#pause #pause-quit {
  --bh: calc(var(--ch) * 0.051);
}
#panel .win #panel-btn {
  --bh: calc(var(--ch) * 0.075);
}
#panel .lose #panel-btn {
  --bh: calc(var(--ch) * 0.08);
}
#panel .lose #more {
  --bh: calc(var(--ch) * 0.092);
}
#cafe-go {
  --bh: calc(var(--ch) * 0.084);
}
@media (min-aspect-ratio: 11/10) {
  #home #play {
    --bh: calc(var(--sh) * 0.16);
  }
}
/* arte com forma (fita, faixa, moeda, tiques, mascote): mantém a proporção do arquivo */
#pause .ribbon,
#panel .ribbon {
  height: auto !important;
  aspect-ratio: 3.73;
}
#cafe-title {
  height: auto !important;
  aspect-ratio: 3.45;
}
.cb-banner {
  height: auto !important;
  aspect-ratio: 3.64;
}
.mnode,
.mnode.cur {
  aspect-ratio: 1.3 !important;
}
.coin-ticks,
.play-ticks,
.cf-tq,
.mp-cafe .tq,
.pn-tq,
.st-tq,
.cb-tq,
.pp-tq,
#panda-tq,
.home-ticks,
.map-dust {
  height: auto !important;
  object-fit: contain !important;
}
#hud #panda {
  height: auto !important;
}
.cb-panda {
  height: auto !important;
}
#hud .box.mv {
  width: calc(var(--sw) * 0.165);
}
@media (min-aspect-ratio: 11/10) {
  #hud .box.mv {
    width: calc(var(--sw) * 0.073);
  }
}
.cb-glow,
.pn-glow {
  display: block;
}
/* meta cumprida: número com selo verde (sem ✓ de texto) */
.goal.done span {
  background: #8fd35a;
  color: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 6px;
  -webkit-text-stroke: 1px var(--ink);
  paint-order: stroke fill;
}
#cafe-go::before,
.btn.big::before {
  display: none !important;
}
#map .map-logo {
  left: calc(var(--cx) + var(--cw) * 0.3) !important;
  top: calc(var(--cyT) + var(--ch) * 0.006) !important;
}
#map .mp-tab img {
  top: 6%;
  height: 52%;
}
#map .mp-tab span {
  bottom: 6%;
}

.cb-panda {
  width: calc(var(--sw) * 0.165) !important;
  height: auto !important;
}
@media (max-aspect-ratio: 11/10) {
  .cb-panda {
    width: calc(var(--cw) * 0.44) !important;
  }
}
#hud .goal img {
  width: auto !important;
  height: calc(var(--sh) * 0.036) !important;
  aspect-ratio: 1;
}
@media (min-aspect-ratio: 11/10) {
  #hud .goal img {
    height: calc(var(--sh) * 0.065) !important;
  }
}
.mp-bar .goal img {
  width: auto !important;
  height: calc(var(--ch) * 0.042) !important;
  aspect-ratio: 1;
}
#map .mp-cafe .shop {
  height: calc(var(--ch) * 0.075) !important;
  width: auto !important;
}
.map-dust {
  height: auto !important;
}

#pause .ribbon svg,
#panel .ribbon svg,
#cafe-title svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#pause .ribbon,
#panel .ribbon,
#cafe-title {
  font-size: 0 !important;
  -webkit-text-stroke: 0 !important;
}
.ribbon 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;
}
#cafe-title svg text {
  fill: #fff6dc;
}

#hud .bar,
#map .mp-bar {
  background: linear-gradient(#fffaf0, #fbefd9) !important;
  border: 4px solid #6b3f2a !important;
  box-shadow:
    inset 0 0 0 5px #f4bd5f,
    0 5px 0 rgba(58, 36, 22, 0.35) !important;
}
#hud .box.mv,
#map .mp-bar .box.mv {
  color: var(--ink) !important;
}
#hud .box.mv small,
#hud .box.mv b,
#map .mp-bar .box.mv small,
#map .mp-bar .box.mv b {
  color: #4a2814 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.4);
}
#hud .box b,
#map .mp-bar .box b {
  color: #4a2814;
}
#hud .box.lv::before,
#hud .box.lv::after,
#map .mp-bar .box.lv::before,
#map .mp-bar .box.lv::after {
  background: #d9822b !important;
  border-color: #3a2416 !important;
}
#hud .goal img {
  height: calc(var(--sh) * 0.046) !important;
}
#boosters .boost {
  border: 4px solid #6b3f2a;
  box-shadow:
    inset 0 0 0 6px #f4bd5f,
    0 5px 0 rgba(58, 36, 22, 0.4);
  background: radial-gradient(circle at 50% 40%, #fffdf6, #f6e3c2);
}
#boosters .boost i {
  min-width: 34%;
  height: 34%;
  font-size: calc(var(--sh) * 0.022);
  line-height: 1;
  display: grid;
  place-items: center;
  top: -6%;
  right: -6%;
}

#pause,
#panel {
  background: rgba(40, 22, 10, 0.32) !important;
}
body.modal #hud {
  z-index: 9;
  pointer-events: none;
}
body.modal #hud .bar::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  background: rgba(40, 22, 10, 0.2);
  z-index: 1;
  pointer-events: none;
}
body.modal #hud #panda {
  filter: brightness(0.82);
}
#hud #panda {
  clip-path: inset(0 0 9% 0);
}
/* a camada ::after das 9 fatias precisa da própria caixa: sem position, ela cobria o vizinho (moeda sumia) */
#panel .win .earn,
#pause .opt {
  position: relative;
}
#pause .opt {
  position: absolute !important;
}

#boosters .boost img {
  object-fit: contain;
}
#panel .win #cafe-box canvas {
  height: auto !important;
  aspect-ratio: 1.47;
  align-self: center;
}
#home .home-level {
  --bh: calc(var(--ch) * 0.063);
}
#pause #pause-quit {
  height: 11.4% !important;
}
/* computador, início (09-desktop-inicio.json, % do cartão): cena própria do cartão, mascote pulando, tiques e poeira */
.home-ticks2,
.home-dust {
  display: none;
}
@media (min-aspect-ratio: 11/10) {
  #home:not([hidden]) {
    background: url(../assets/fundo-cartao.webp) center / cover !important;
  }
  #home .home-panda {
    content: url(../assets/panda-joy.webp);
    left: 16.8%;
    top: 33%;
    width: 56% !important;
  }
  #home .home-shadow {
    display: none;
  }
  #home .home-ticks {
    display: block;
    left: 23.8%;
    top: 33%;
    width: 11.8% !important;
    transform: scaleX(-1);
  }
  #home .home-ticks2 {
    display: block;
    left: 64.4%;
    top: 38.7%;
    width: 10% !important;
  }
  #home .home-dust {
    display: block;
    left: 40.9%;
    top: 69.5%;
    width: 12.6% !important;
  }
  #home .play-ticks {
    display: none;
  }
}

.mnode {
  background-image: url(../assets/ui-moeda-nivel2.webp) !important;
}
.mnode.lock {
  background-image: url(../assets/ui-moeda-cadeado2.webp) !important;
}
.mnode.cur {
  background-image: url(../assets/ui-moeda-nivel2.webp) !important;
}

#panel .lose .pn-tq.l {
  z-index: 5 !important;
  top: -16% !important;
  left: 22% !important;
  width: 11% !important;
}

#hud .goal img {
  height: calc(var(--sh) * 0.055) !important;
}
@media (min-aspect-ratio: 11/10) {
  #hud .goal img {
    height: calc(var(--sh) * 0.085) !important;
  }
}

.mnode.cur {
  background-image: url(../assets/ui-moeda-atual2.webp) !important;
  width: calc(var(--cw) * 0.2) !important;
  aspect-ratio: 1.18 !important;
  filter: none !important;
}
.mnode.cur::before {
  display: none;
}

@media (min-aspect-ratio: 11/10) {
  #home .home-level {
    display: none !important;
  }
}
#hud .box.lv::before,
#hud .box.lv::after,
#map .mp-bar .box.lv::before,
#map .mp-bar .box.lv::after {
  width: 14% !important;
  height: 34% !important;
  top: -22% !important;
  border-radius: 999px !important;
  background: transparent !important;
  border: 4px solid #d9822b !important;
  box-shadow:
    0 0 0 2px #3a2416,
    inset 0 0 0 2px #3a2416;
}
#hud .goals {
  border-left: 4px solid #6b3f2a !important;
}
.goal.done span {
  background: none !important;
  border: 0 !important;
  color: #4f9a2c !important;
  -webkit-text-stroke: 0 !important;
  padding: 0 !important;
}
.cb-glow {
  background:
    url(../assets/ui-explosao.webp) center / contain no-repeat,
    radial-gradient(
      closest-side,
      rgba(255, 240, 160, 1),
      rgba(255, 214, 110, 0.7) 45%,
      rgba(255, 214, 110, 0)
    ) !important;
}
@media (min-aspect-ratio: 11/10) {
  body.celebrating #hud .goals {
    gap: calc(var(--sw) * 0.012) !important;
    padding-left: calc(var(--sw) * 0.008);
  }
  body.celebrating #hud .goal img {
    height: calc(var(--sh) * 0.053) !important;
  }
  body.celebrating #hud .box {
    width: calc(var(--sw) * 0.06) !important;
  }
}

#hud .box.lv::before,
#hud .box.lv::after {
  top: -40% !important;
}
#hud .goal {
  gap: 0 !important;
  justify-content: center;
}
#hud .goal img {
  height: calc(var(--sh) * 0.045) !important;
}
#pause,
#panel {
  background: rgba(40, 22, 10, 0.45) !important;
}
body.modal:not(.at-cafe) #hud .bar::after {
  background: rgba(40, 22, 10, 0.38) !important;
}
body.modal:not(.at-cafe) #hud #panda {
  filter: brightness(0.65) !important;
}
body.at-cafe #hud .bar::after {
  display: none;
}
body.at-cafe #hud #panda {
  filter: none !important;
}

#panel .win .pn-sp {
  width: 9% !important;
}
#panel .win .pn-glow {
  background:
    url(../assets/ui-explosao.webp) center / contain no-repeat,
    radial-gradient(
      closest-side,
      rgba(255, 240, 160, 1),
      rgba(255, 214, 110, 0.75) 45%,
      rgba(255, 214, 110, 0)
    ) !important;
}
#panel .win .stars {
  background: radial-gradient(
    closest-side,
    rgba(255, 232, 140, 1),
    rgba(255, 214, 110, 0.5) 60%,
    transparent
  ) !important;
}
#panel .win .cafe-bar {
  height: calc(var(--ch) * 0.03) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 999px !important;
  background: #ead3b5 !important;
  overflow: hidden;
}
#panel .win .cafe-bar > b {
  display: block;
  height: 100%;
  background: linear-gradient(#a6e06a, #5fae35);
}
#panel #panel-home {
  top: auto !important;
  bottom: 1.5% !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  font-size: calc(var(--ch) * 0.022) !important;
}
#panel .lose .earn,
#panel .lose #panel-text::after {
  border-color: #6b3f2a !important;
}
#panel .lose .earn {
  border-width: 3px !important;
}
#cafe-screen .cafe-prog::after {
  border-width: 0 calc(var(--ch) * 0.042);
  border-image: url(../assets/btn-creme.webp) 0 17% fill / 0 calc(var(--ch) * 0.042) stretch !important;
}
#cafe-go {
  padding: 0 !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center;
}

body,
button,
.btn,
.ribbon svg text {
  font-family: 'Fredoka', 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif !important;
}
.btn:not(.ghost) {
  color: #fff6e2 !important;
  -webkit-text-stroke: 5px #6b3a14 !important;
  paint-order: stroke fill;
  font-weight: 700 !important;
  text-shadow: 0 3px 0 rgba(58, 36, 22, 0.35) !important;
}
.ribbon svg text {
  font-weight: 700;
}

.coin-ticks,
.play-ticks,
.home-ticks,
#panda-tq,
.pn-tq,
.st-tq,
.cb-tq,
.pp-tq,
.cf-tq,
.mp-cafe .tq {
  width: auto !important;
}
#home .play-ticks {
  height: calc(var(--ch) * 0.056) !important;
}
body.at-home .coin-ticks {
  height: calc(var(--ch) * 0.032) !important;
}
#home .home-ticks {
  height: calc(var(--ch) * 0.07) !important;
}
#panda-tq {
  height: calc(var(--sh) * 0.034) !important;
}
#map .mp-cafe .tq {
  height: 75% !important;
}
body:not(.at-map):not(.at-home) #tip::before,
body:not(.at-map):not(.at-home) #tip::after {
  background-image: url(../assets/ui-tiques-d2.webp) !important;
  width: 6% !important;
  height: 90% !important;
  top: -70% !important;
}
/* café reformado: mascote em pé e folhas ao lado do Continuar */
.cf-folha {
  position: fixed;
  top: calc(var(--cyB) + var(--ch) * 0.885);
  width: calc(var(--cw) * 0.085);
  z-index: 4;
}
.cf-folha.l {
  left: calc(var(--cx) + var(--cw) * 0.2);
}
.cf-folha.r {
  left: calc(var(--cx) + var(--cw) * 0.715);
}
.mnode.done {
  background-image: url(../assets/ui-moeda-creme.webp) !important;
}

#panel .pn-tq {
  height: calc(var(--ch) * 0.036) !important;
}
#panel .st-tq {
  height: calc(var(--ch) * 0.05) !important;
}
#pause .pp-tq {
  height: calc(var(--ch) * 0.034) !important;
}
.cf-tq.l,
.cf-tq.r {
  height: calc(var(--ch) * 0.032) !important;
}
.cf-tq.p {
  height: calc(var(--ch) * 0.039) !important;
}
.cb-tq {
  height: calc(var(--sh) * 0.055) !important;
}
@media (max-aspect-ratio: 11/10) {
  .cb-tq {
    height: calc(var(--ch) * 0.05) !important;
  }
}
#panel .lose .pn-tq.l {
  height: calc(var(--ch) * 0.04) !important;
  width: auto !important;
}

#hud .box.lv::before,
#hud .box.lv::after,
#map .mp-bar .box.lv::before,
#map .mp-bar .box.lv::after {
  background: linear-gradient(#f3a54a, #d9822b) !important;
  border: 2.5px solid #3a2416 !important;
  box-shadow: none !important;
}
@media (min-aspect-ratio: 11/10) {
  #panda-tq {
    height: calc(var(--sh) * 0.055) !important;
    left: calc(var(--sx) + var(--sw) * 0.612) !important;
    top: calc(var(--sy) + var(--sh) * 0.035) !important;
  }
  #home .home-logo {
    left: 18% !important;
    top: 5.5% !important;
    width: 74% !important;
  }
}

#hud .box.lv::before,
#hud .box.lv::after,
#map .mp-bar .box.lv::before,
#map .mp-bar .box.lv::after {
  width: 11% !important;
  height: 30% !important;
  top: -24% !important;
  border-radius: 5px !important;
  background: linear-gradient(#b8682a, #7a3f17) !important;
  border: 2.5px solid #3a2416 !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3) !important;
}
#hud .box.lv small,
#map .mp-bar .box.lv small {
  margin-top: 12%;
}
#home .home-shadow {
  z-index: 0 !important;
  background: radial-gradient(closest-side, rgba(58, 36, 22, 0.5), rgba(58, 36, 22, 0.25) 60%, transparent) !important;
}

@media (max-aspect-ratio: 11/10) {
  body.modal:not(.at-cafe) #hud #panda,
  body.at-cafe #hud #panda {
    clip-path: inset(0 0 26% 0) !important;
  }
}
#panda-tq {
  height: calc(var(--sh) * 0.05) !important;
}
#panel .win .st-tq {
  height: calc(var(--ch) * 0.065) !important;
}
#panel .win .pn-tq {
  height: calc(var(--ch) * 0.05) !important;
}
#panel .lose .pn-tq.l {
  height: calc(var(--ch) * 0.055) !important;
}
.cf-tq.l,
.cf-tq.r {
  height: calc(var(--ch) * 0.045) !important;
}
.cf-msp.a {
  width: calc(var(--cw) * 0.08) !important;
}
#panel .pn-raios {
  display: none;
}
#panel .win .pn-raios {
  display: block;
  position: absolute;
  left: 0;
  top: -38%;
  width: 100%;
  height: 48%;
  z-index: 0;
  pointer-events: none;
  background: repeating-conic-gradient(
    from -90deg at 50% 70%,
    rgba(255, 214, 110, 0.75) 0 7deg,
    transparent 7deg 20deg
  );
  -webkit-mask: radial-gradient(closest-side at 50% 70%, #000 30%, transparent 95%);
  mask: radial-gradient(closest-side at 50% 70%, #000 30%, transparent 95%);
}
.cf-fl {
  position: fixed;
  top: calc(var(--cyT) + var(--ch) * 0.285);
  width: calc(var(--cw) * 0.08);
  z-index: 4;
}
.cf-fl.l {
  left: calc(var(--cx) + var(--cw) * 0.12);
}
.cf-fl.r {
  left: calc(var(--cx) + var(--cw) * 0.8);
}
#cafe-go {
  height: calc(var(--ch) * 0.084) !important;
  min-height: 0 !important;
  padding: 0 !important;
}
#panel .lose .earn {
  background: #fde3c4 !important;
  border: 2px solid #c99a6a !important;
}

#map .mnode {
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
#map .mnode.done {
  aspect-ratio: 1.3 !important;
}
#map .mnode.lock {
  aspect-ratio: 1.24 !important;
}
#map .mnode.cur {
  width: calc(var(--cw) * 0.143) !important;
  aspect-ratio: 1.3 !important;
  background-image: url(../assets/ui-moeda-nivel2.webp) !important;
  filter: drop-shadow(0 0 1.4vh rgba(255, 226, 122, 1)) drop-shadow(0 0 0.6vh #fff3b0) !important;
}
#map .mnode.cur::before {
  display: block !important;
  content: '';
  position: absolute;
  inset: -55% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 240, 170, 0.95), rgba(255, 214, 110, 0.5) 55%, transparent);
}
#map .mnode.cur::after {
  inset: -40% -22% !important;
  background-size: 38% !important;
}

@media (max-aspect-ratio: 11/10) {
  #home .home-shadow {
    top: calc(var(--cy) + var(--ch) * 0.698) !important;
    height: calc(var(--ch) * 0.042) !important;
    background: radial-gradient(
      closest-side,
      rgba(58, 36, 22, 0.7),
      rgba(58, 36, 22, 0.4) 55%,
      rgba(58, 36, 22, 0)
    ) !important;
  }
}
#pause .pause-panda {
  clip-path: inset(0 0 30% 0);
}
/* ícones das metas no computador (a regra .045 de cima vencia) */
@media (min-aspect-ratio: 11/10) {
  #hud .goal img {
    height: calc(var(--sh) * 0.07) !important;
  }
  body.celebrating #hud .goal img {
    height: calc(var(--sh) * 0.056) !important;
  }
}

.btn:not(.ghost)::after {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  font-size: 0;
  text-shadow: none;
}
/* mascotes atrás da arte do painel: a borda esconde as pernas, a cauda continua inteira */
#pause .pause-panda {
  clip-path: none !important;
  z-index: -1 !important;
}

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