/* Mahjong Garden styles, part 4 of 4: final overrides: landscape phone, tablet, tutorial, last adjustments. The four files are loaded in order (see index.html) and each one can override the one before it: to change a rule, edit the LAST file that sets it. */

/* settings: language list in the game's style, inside the row; window closer to the center; title centered on the ribbon */
.set-lang {
  -webkit-appearance: none;
  appearance: none;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a3518' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    right 0.6em center / 0.8em auto no-repeat !important;
  padding-right: 1.8em !important;
  max-width: 52%;
  min-width: 0;
  font-weight: 800 !important;
  cursor: pointer;
}
.modal.settings .set-lang {
  max-width: 46cqw;
}
.modal.settings {
  top: 28cqh !important;
}
.modal.settings .ribbon span {
  padding: 0 0 0.5cqh !important;
}
body:has(.modal.win) .topbar .pill,
body:has(.modal.lose) .topbar .pill,
body:has(.modal.pause) .topbar .pill {
  visibility: hidden !important;
}
body:has(.modal.lose) .helpers,
body:has(.modal.lose) .mascot,
body:has(.modal.lose) .front-flowers {
  display: none !important;
}
body .modal.lose .scene {
  -webkit-mask-image: radial-gradient(ellipse 52% 60% at 50% 46%, #000 70%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 52% 60% at 50% 46%, #000 70%, transparent 100%) !important;
}
body.land:not(.s-home) .topbar .coins {
  min-width: calc(17 * var(--uh)) !important;
}
body:not(.land) .pause-back,
body.land .pause-back,
body:not(.land) .settings-back {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body .modal.pause .ribbon span {
  padding-top: 2.6cqh !important;
}
body .modal.pause .switches .lang-row {
  width: 46cqw !important;
  left: 3cqw !important;
}
body .modal.pause .switches .vibe-row {
  left: 51cqw !important;
  width: 33cqw !important;
}
body .modal.pause .switches .set-lang {
  max-width: 27cqw !important;
  font-size: 1.9cqh !important;
}
/* landscape tutorial: bubble with a little tail pointing to the mole and a minimum readable font size */
body.land .bubble {
  font-size: max(3vh, 13px) !important;
}
body.land .bubble::after {
  display: block !important;
  content: '';
  position: absolute;
  left: 22%;
  right: auto;
  top: 100%;
  width: 0;
  height: 0;
  border: 1.4vh solid transparent;
  border-top: 2vh solid #fffaf0;
  border-bottom: 0;
  filter: drop-shadow(0 0.25vh 0 #5a3518);
}
/* portrait menu in a column, full mole between the logo and Play */
body:not(.land).s-home .home .logo {
  left: 50% !important;
  top: calc(var(--sat) + 4vh) !important;
  width: min(calc(84 * var(--pu) / 100), calc(31vh * 1.224)) !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  animation: none !important;
}
body:not(.land).s-home .home-mascot {
  left: 50% !important;
  right: auto !important;
  top: calc(var(--sat) + 39vh) !important;
  bottom: auto !important;
  height: 28vh !important;
  width: auto !important;
  transform: translateX(-50%) !important;
}
/* landscape match: larger full-body mole, facing right (into the game) */
body.land:not(.s-home) .mascot {
  height: calc(56 * var(--uh)) !important;
  bottom: 8vh !important;
  left: calc(var(--sx) + 6 * var(--sw) / 100) !important;
  scale: -1 1 !important;
}
/* landscape top: sound and settings in the right corner (aligned with the helpers); level and coins in the center of the column */
body.land:not(.s-home) .topbar .round.small.gear-btn {
  left: calc(var(--sx) + 84.5 * var(--sw) / 100 + 11.1 * var(--su) / 100 - min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13))) !important;
}
body.land:not(.s-home) .topbar .snd-btn {
  left: calc(
    var(--sx) + 84.5 * var(--sw) / 100 + 11.1 * var(--su) / 100 - 2 * min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13)) - 1.2 * var(--uh)
  ) !important;
}
body.land:not(.s-home) .topbar .pill.level {
  left: calc(var(--colx) + var(--colw) / 2 - 1 * var(--uh)) !important;
  transform: translateX(-100%) !important;
}
body.land:not(.s-home) .topbar .coins {
  left: calc(var(--colx) + var(--colw) / 2 + 1 * var(--uh)) !important;
  transform: none !important;
}
/* coin pill in flow: coin and number side by side, nothing on top */
.topbar .coins {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35em;
  overflow: visible !important;
}
.topbar .coins i {
  position: static !important;
  transform: none !important;
  flex: none !important;
  margin: 0 0 0 -0.6em !important;
  left: auto !important;
  top: auto !important;
}
.topbar .coins b {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  width: auto !important;
  min-width: max-content !important;
  text-align: left !important;
}
body.land:not(.s-home) .topbar .coins i {
  width: calc(7.4 * var(--uh)) !important;
  height: calc(7.4 * var(--uh)) !important;
}
body:not(.land) .topbar .coins i {
  width: 4.6vh !important;
  height: 4.6vh !important;
}
body:not(.land) .topbar .coins b {
  font-size: 3vh !important;
}
body:not(.land).s-home .ray {
  display: none !important;
} /* no stray lines: the mole moved out from behind the logo */
/* menu juice: little hop on pose change (squash up to 8%, no jelly effect) and a light sway */
.home-mascot {
  cursor: pointer;
  animation: moleIdle 2.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.home-mascot.hop {
  animation:
    moleHop 0.55s cubic-bezier(0.3, 1.5, 0.5, 1),
    moleIdle 2.6s 0.55s ease-in-out infinite;
}
@keyframes moleIdle {
  0%,
  100% {
    scale: 1 1;
  }
  50% {
    scale: 1.02 0.985;
  }
}
@keyframes moleHop {
  0% {
    scale: 1.06 0.93;
    translate: 0 0;
  }
  35% {
    scale: 0.96 1.06;
    translate: 0 -9%;
  }
  70% {
    scale: 1.03 0.97;
    translate: 0 0;
  }
  100% {
    scale: 1 1;
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-mascot,
  .home-mascot.hop {
    animation: none;
  }
}
.s-home .home-coins {
  display: none !important;
}
body.land .modal-back {
  --bh: 115vh !important;
  --bw: calc(115vh * 941 / 1672) !important;
  inset: -2vh auto auto calc((100vw - 115vh * 941 / 1672) / 2) !important;
  width: calc(115vh * 941 / 1672) !important;
  height: 115vh !important;
}
/* victory: the +14 does not sit under the coin */
body .modal.win .earn {
  padding-left: 15cqw !important;
}
/* defeat: text with a minimum readable font size */
body .modal.lose .m-body p {
  font-size: max(2.1cqh, 14px) !important;
}
body .modal.lose .lose-head {
  font-size: max(2.6cqh, 16px) !important;
}
body:has(.modal.settings) .home > *,
body:has(.modal.settings) .home-mascot {
  visibility: hidden !important;
}
/* landscape settings: wider window, rows and button at 44 px or more */
body.land .settings-back {
  --bh: 100vh !important;
  inset: 0 auto auto calc((100vw - min(64vw, 500px)) / 2) !important;
  width: min(64vw, 500px) !important;
  height: 100vh !important;
}
body.land .modal.settings {
  top: 14cqh !important;
}
.modal.settings .set-row {
  min-height: 44px !important;
}
.modal.settings .row .btn {
  min-height: 44px !important;
}
.modal.settings .set-row,
.modal.settings .row .btn {
  font-size: max(5cqw, 14px) !important;
}
/* menu: breathing room between the tiles and the mole; sound and settings aligned to the top of the logo */
body.land.s-home .home .logo {
  height: 40vh !important;
}
body.land.s-home .home-mascot {
  height: 32vh !important;
}
body.land.s-home .home-row .small-btn {
  top: 2.5vh !important;
}
body.land .bubble {
  top: auto !important;
  bottom: calc(8vh + 56 * var(--uh) + 2.4vh) !important;
  left: calc(var(--sx) + 4 * var(--sw) / 100) !important;
}
body.land .bubble::after {
  left: 38% !important;
}
body:has(.modal.pause) .mascot {
  visibility: hidden !important;
}
body.land .hwrap:nth-child(1),
body.land .hwrap:nth-child(2),
body.land .hwrap:nth-child(3) {
  width: calc(11.1 * var(--su) / 100) !important;
  left: calc(var(--sx) + 84.5 * var(--sw) / 100) !important;
  height: calc(21 * var(--uh)) !important;
}
body.land .hwrap:nth-child(1) {
  top: 16vh !important;
}
body.land .hwrap:nth-child(2) {
  top: 40vh !important;
}
body.land .hwrap:nth-child(3) {
  top: 64vh !important;
}
body.land .hwrap:nth-child(3) .hlabel {
  left: 0 !important;
  width: 100% !important;
}
body:not(.land) .topbar .pill.level .lvw {
  display: inline !important;
  font-size: 1.9vh !important;
  margin-right: 0.3em;
}
body:not(.land) .topbar .pill.level {
  width: calc(23 * var(--pu) / 100) !important;
}
/* defeat: sad full-body mole, without the scene rectangle */
body .modal.lose .scene {
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
body .modal.lose .scene img {
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: 100% !important;
  object-fit: contain !important;
  top: 0 !important;
}
body .modal.lose .scene {
  overflow: visible !important;
}
body .modal.lose .scene img {
  height: 86% !important;
  top: auto !important;
  bottom: 0 !important;
  z-index: 0;
}
body .modal.lose .ribbon {
  z-index: 2 !important;
}
body.land:has(.modal.win) .modal-back,
body.land:has(.modal.lose) .modal-back {
  --bh: 121vh !important;
  --bw: calc(121vh * 941 / 1672) !important;
  inset: -4vh auto auto calc((100vw - 121vh * 941 / 1672) / 2) !important;
  width: calc(121vh * 941 / 1672) !important;
  height: 121vh !important;
}
body:not(.land):has(.modal.win) .modal-back,
body:not(.land):has(.modal.lose) .modal-back {
  transform: translateY(12vh) scale(0.94);
} /* optical center and 6% side margin */
body .modal.lose .m-body p:not(.lose-head) {
  max-width: 74cqw;
  margin-left: auto !important;
  margin-right: auto !important;
}
body .modal.win .row button,
body .modal.lose .row button {
  min-height: 44px;
}
body .modal.lose .row button.yellow {
  color: #fff !important;
  text-shadow: 0 2px 0 #9a5a10 !important;
  white-space: nowrap;
}
body:not(.land).s-home .home-row .small-btn:not(.home-gear) {
  left: calc(var(--px) + 63 * var(--pw) / 100) !important;
  top: calc(var(--sat) + 1.4vh) !important;
  width: calc(13 * var(--pu) / 100) !important;
  height: calc(13 * var(--pu) / 100) !important;
}
body:not(.land).s-home .home-gear {
  left: calc(var(--px) + 81 * var(--pw) / 100) !important;
  top: calc(var(--sat) + 1.4vh) !important;
  width: calc(13 * var(--pu) / 100) !important;
  height: calc(13 * var(--pu) / 100) !important;
}
/* settings and pause: 44 px touch targets */
.set-row {
  min-height: 44px;
  box-sizing: border-box;
}
.set-row select {
  min-height: 40px;
}
.switch.set-row b {
  min-width: 52px;
  min-height: 28px;
  flex: none;
}
/* landscape pause: the group (mole to the badge) centered, with space above and below */
body.land .modal-back.pause-back {
  --bh: 117vh !important;
  --bw: calc(117vh * 941 / 1672) !important;
  inset: -5vh auto auto calc((100vw - 117vh * 941 / 1672) / 2) !important;
  width: calc(117vh * 941 / 1672) !important;
  height: 117vh !important;
}
body.land .hand {
  width: min(calc(6 * var(--su) / 100), 10vh) !important;
}
/* portrait menu: logo below the sound and gear buttons */
body:not(.land).s-home .home .logo {
  top: calc(var(--sat) + 9.5vh) !important;
  width: min(calc(80 * var(--pu) / 100), calc(28vh * 1.224)) !important;
}
body .modal.lose .mini-tray .faisca {
  display: none !important;
} /* dots turned into dirt; the gold on the cells already shows the matching ones */
body .modal.lose .m-body p {
  font-size: max(2.5cqh, 15px) !important;
  font-weight: 700 !important;
}
body .modal.lose .l-folha {
  transform: scale(0.75);
}
body .modal.lose .l-folha.r {
  transform: scaleX(-1) scale(0.75);
}
body .modal.lose .bbadge {
  top: -0.9cqh !important;
}
body.land .settings-back .modal,
body.land .sound-back .modal {
  top: 50% !important;
  bottom: auto !important;
  translate: 0 -50%;
} /* settings and sound at mid height */
.set-row select {
  min-height: 44px !important;
}
.switch.set-row b {
  min-width: 56px !important;
  min-height: 32px !important;
}
.vibe-row {
  padding-right: 12px !important;
}
body .modal.pause button {
  min-height: 44px;
}
.topbar .round {
  min-width: 44px !important;
  min-height: 44px !important;
}
body.land .hwrap .hlabel {
  font-size: max(1.5vh, 12px) !important;
}
.stop .sstars img:not(.on) {
  filter: grayscale(1) brightness(0.85) drop-shadow(0 0 1px #3a2416) drop-shadow(0 0 1px #3a2416) !important;
  opacity: 1 !important;
} /* empty star: light gray with a dark outline (disappears less on brown) */ /* empty star shows on cream */
/* landscape settings and sound grow with the height (the content is in px) */
@media (min-height: 760px) {
  body.land .settings-back .modal,
  body.land .sound-back .modal {
    scale: 1.3;
  }
}
@media (min-height: 1000px) {
  body.land .settings-back .modal,
  body.land .sound-back .modal {
    scale: 1.6;
  }
}
@media (min-height: 1300px) {
  body.land .settings-back .modal,
  body.land .sound-back .modal {
    scale: 1.7;
  }
}
body .modal.pause .vibe-row b {
  min-width: 38px !important;
  min-height: 24px !important;
} /* the whole row (44 px) is the touch target; the switch fits in the box */
body .modal.pause .vibe-row {
  padding: 0 5px 0 7px !important;
  overflow: hidden;
}
/* defeat: the text always fits in the box (one line each; shrinks on short screens) */
body .modal.lose .m-body p {
  font-size: min(max(2.6cqh, 14px), 4.6cqw) !important;
}
body .modal.lose .lose-head + p {
  left: 50% !important;
  width: 84% !important;
  text-align: center;
} /* the old rule already centers with translate -50% */
body.land .hwrap .hlabel {
  font-size: max(2.1vh, 13px) !important;
  letter-spacing: -0.01em;
  font-weight: 800 !important;
}
body .modal.pause .switches .lang-row {
  left: 4cqw !important;
  width: 40cqw !important;
}
body .modal.pause .switches .vibe-row {
  left: 46cqw !important;
  width: 37.5cqw !important;
  justify-content: space-between;
  gap: 1cqw;
}
body .modal.pause .switches .set-lang {
  max-width: 25cqw !important;
  font-size: max(1.9cqh, 11px) !important;
  padding: 0 3px !important;
}
.set-lang {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 24px !important;
  background: #fff8e6
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2356270c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 8px center / 11px 8px !important;
  border: 2px solid #c9a070 !important;
  border-radius: 10px !important;
  color: #4a2a14 !important;
  font-weight: 700 !important;
}
.map-head .sign .arc text {
  font-size: 64px !important;
}
body.land .bubble {
  font-size: max(3vh, 14px) !important;
}

@media (max-height: 500px) {
  body .modal.pause .lang-row > span {
    display: none !important;
  }
  body .modal.pause .switches .set-lang {
    max-width: none !important;
    width: 100% !important;
  }
} /* landscape phone: the list shows the full language name */
body.land .modal.win .row .btn.lv-btn:nth-child(1),
body .modal.win .row .btn.lv-btn:nth-child(1) {
  left: 7cqw !important;
}
body .modal.win .row .btn.btn:not(.lv-btn):nth-child(2) {
  left: 25.7cqw !important;
} /* back + Next pair centered in the window */
body .modal.win .row button:nth-child(1) {
  min-width: 44px;
}
body:not(.land) .bubble {
  left: max(2vw, calc(100vw - 3vw - var(--mascot-h) * 0.87 - 46 * var(--pu) / 100)) !important;
} /* bubble touching the mole (on tablet it was far away) */
@media (max-height: 500px) {
  body.land .modal-back.pause-back {
    --bh: 118vh !important;
    --bw: calc(118vh * 941 / 1672) !important;
    inset: -6vh auto auto calc((100vw - 118vh * 941 / 1672) / 2) !important;
    width: calc(118vh * 941 / 1672) !important;
    height: 118vh !important;
  }
}
body .modal.pause .switches .set-lang {
  font-size: inherit !important;
}
body .btn.go::after {
  display: none !important;
}
body.land.s-home .home-mascot {
  height: 29.5vh !important;
} /* gap between the logo tiles and the hat */
body .modal.pause .lang-row > span {
  display: none !important;
}
body .modal.pause .switches .set-lang {
  max-width: none !important;
  width: 100% !important;
} /* pause: the list shows the full language name (the label was cutting off the name) */
body .modal.win .earn {
  background: url(../assets/ui/pilula-moedas.webp) center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  color: #5a2a0c !important;
} /* golden reward pill */
/* map: sound and settings with the menu art; coin inside the pill */
.topbar .map-snd,
.topbar .map-gear {
  background: url(../assets/ui/btn-som-inicio.webp) center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 50% !important;
  min-width: 44px;
  min-height: 44px;
}
.topbar .map-gear {
  background-image: url(../assets/ui/btn-gear-inicio.webp) !important;
}
.map ~ .topbar .coins {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3em;
  padding: 0 !important;
}
.map ~ .topbar .coins i {
  margin: 0 !important;
}
.map ~ .topbar .coins b {
  padding: 0 !important;
  margin: 0 !important;
}
/* menu: mole centered without translate (on iPhone the % offset was not recalculated when the pose changed) */
body.s-home .home-mascot {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}
/* landscape phone: the portrait tray takes the left side; the mole leaves so the board can grow */
body.vtray:not(.tut) .mascot {
  display: none !important;
}
body.vtray .bubble {
  left: calc(var(--trayR) + 10px) !important;
  top: 24vh !important;
  bottom: auto !important;
  width: min(calc(21 * var(--su) / 100), 170px) !important;
}
.modal.settings .ribbon span {
  font-size: max(min(7.4cqw, 5.4cqh), 20px) !important;
} /* the title fits the ribbon height in landscape too */
/* match mole: the full-body poses already face right (toward the game) in landscape; in portrait it stands to the right of the board, so it is mirrored to face the game */
body.land:not(.s-home) .mascot {
  scale: -1 1 !important;
  height: calc(56 * var(--uh) * var(--pose-k, 1)) !important;
}
body:not(.land):not(.s-home) .mascot {
  scale: 1 1 !important;
}
body:not(.land):not(.s-home) .mascot[src*='aponta2'] {
  scale: -1 1 !important;
}
body .modal.lose .bbadge {
  right: -7% !important;
  top: -16% !important;
  left: auto !important;
} /* badge off the corner: does not touch the "r" in Desfazer (Undo) */
/* landscape phone, tutorial: bubble on top and the mole below, between the tray and the tiles */
body.vtray.tut .bubble {
  top: 24vh !important;
}
body.vtray.tut .mascot {
  left: calc(var(--trayR) + 18px) !important;
  right: auto !important;
  bottom: 4vh !important;
  height: 44vh !important;
}
/* victory: title with the same weight as defeat (white, brown outline) */
.modal.win .ribbon .arc text,
.modal.lose .ribbon .arc text {
  fill: #fff !important;
  stroke: #7a3a1c !important;
  stroke-width: 9px !important;
  paint-order: stroke fill;
  stroke-linejoin: round;
}
body .modal.lose .m-body p {
  line-height: 1.32 !important;
  padding-bottom: 0.2em;
} /* the tail of the j in "jogada" is not clipped */
body .modal.pause {
  height: 52.5cqh !important;
} /* without the logo badge, the window ends right after language/vibration */
body.land.s-home .home-mascot {
  height: 28vh !important;
  bottom: calc(5vh + 14vh + 4.5vh) !important;
} /* gap down to Play */
body[data-world='1'] {
  --wf: url(../assets/mundos/lago/fundo.webp);
  --wfl: url(../assets/mundos/lago/fundo-largo.webp);
  --wflu: url(../assets/mundos/lago/fundo-largo-ultra.webp);
  --wm: url(../assets/mundos/lago/mapa.webp);
  --wmd: url(../assets/mundos/lago/mapa-deitado.webp);
  --wmu: url(../assets/mundos/lago/mapa-ultra.webp);
  --wma: url(../assets/mundos/lago/mapa-alto.webp);
  --wmpu: url(../assets/mundos/lago/mapa-pe-ultra.webp);
  --wmpa: url(../assets/mundos/lago/mapa-pe-alto.webp);
}
body[data-world='2'] {
  --wf: url(../assets/mundos/pomar/fundo.webp);
  --wfl: url(../assets/mundos/pomar/fundo-largo.webp);
  --wflu: url(../assets/mundos/pomar/fundo-largo-ultra.webp);
  --wm: url(../assets/mundos/pomar/mapa.webp);
  --wmd: url(../assets/mundos/pomar/mapa-deitado.webp);
  --wmu: url(../assets/mundos/pomar/mapa-ultra.webp);
  --wma: url(../assets/mundos/pomar/mapa-alto.webp);
  --wmpu: url(../assets/mundos/pomar/mapa-pe-ultra.webp);
  --wmpa: url(../assets/mundos/pomar/mapa-pe-alto.webp);
}
body[data-world='3'] {
  --wf: url(../assets/mundos/neve/fundo.webp);
  --wfl: url(../assets/mundos/neve/fundo-largo.webp);
  --wflu: url(../assets/mundos/neve/fundo-largo-ultra.webp);
  --wm: url(../assets/mundos/neve/mapa.webp);
  --wmd: url(../assets/mundos/neve/mapa-deitado.webp);
  --wmu: url(../assets/mundos/neve/mapa-ultra.webp);
  --wma: url(../assets/mundos/neve/mapa-alto.webp);
  --wmpu: url(../assets/mundos/neve/mapa-pe-ultra.webp);
  --wmpa: url(../assets/mundos/neve/mapa-pe-alto.webp);
}
.topbar .map-prev,
.topbar .map-next {
  background: url(../assets/ui/btn-voltar-redondo.webp) center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 50% !important;
  min-width: 44px;
  min-height: 44px;
}
.topbar .map-prev img,
.topbar .map-next img {
  display: none;
}
.topbar .map-next {
  transform: scaleX(-1) !important;
}
/* defeat: more height for the mole (the window moves up 4cqh; tray, text and buttons move down 4cqh; the window's end stays the same) */
body .modal.lose {
  top: 27cqh !important;
  height: 53cqh !important;
}
body .modal.lose .scene {
  height: 17.8cqh !important;
}
body .modal.lose .mini-tray {
  top: 22.5cqh !important;
}
body .modal.lose .lose-head {
  top: 34.5cqh !important;
}
body .modal.lose .lose-head + p {
  top: 37.5cqh !important;
}
body .modal.lose .l-folha {
  top: 35.5cqh !important;
}
body .modal.lose .row .btn:nth-child(1),
body .modal.lose .row .btn:nth-child(2) {
  top: 42cqh !important;
}
body:not(.land) .helpers {
  bottom: calc(var(--sab) + 4.5vh) !important;
} /* away from the iPhone home indicator */
@media (max-height: 500px) {
  body.land:has(.modal.win) .modal-back,
  body.land:has(.modal.lose) .modal-back {
    --bh: 130vh !important;
    --bw: calc(130vh * 941 / 1672) !important;
    inset: -7vh auto auto calc((100vw - 130vh * 941 / 1672) / 2) !important;
    width: calc(130vh * 941 / 1672) !important;
    height: 130vh !important;
  }
} /* landscape phone: larger victory and defeat */
body:not(.land):has(.modal.lose) .modal-back {
  transform: translateY(15vh) scale(0.88) !important;
} /* portrait defeat with the same side margin as victory */
body:not(.land).s-home .home .btn.big {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
} /* Play on the axis of the logo and the mole (on tablet it was 80 px to the left) */
body:not(.land) .map-sign.sem-placa,
body:not(.land) .map-art:has(.map-sign.sem-placa) .map-mascot,
body:not(.land) .map-art:has(.map-sign.sem-placa) .fx-rays {
  display: none !important;
} /* portrait pond: no free grass (water and stones), the map mole does not appear */
@media (max-height: 500px) {
  body .modal.pause {
    height: 55cqh !important;
  }
} /* gap below the language/vibration row */
body .modal.win .earn {
  font-size: max(3.4cqh, 17px) !important;
}
body .modal.win .row .btn.go,
body .modal.lose .row .btn {
  font-size: max(3.2cqh, 16px) !important;
}
body:not(.land) .topbar .coins i {
  width: 4vh !important;
  height: 4vh !important;
  align-self: center;
} /* coin the size of the pill, not overflowing the top */
body:not(.land):not(.s-home) .topbar .pill {
  margin-top: 0.6vh !important;
}
@media (max-height: 500px) {
  .modal.settings .ribbon {
    height: 13cqh !important;
    top: -8cqh !important;
  }
} /* title plaque tall enough for the lettering */
body.land .hwrap .hlabel {
  top: calc(11.1 * var(--su) / 100 + 3px) !important;
} /* label glued to its own button */
body .modal.pause .switches .set-lang {
  border-color: transparent !important;
  background-color: transparent !important;
} /* no box inside a box */
body.vtray.tut .mascot {
  bottom: 7vh !important;
  height: 41vh !important;
}
.modal.win .ribbon .arc text {
  font-size: 90px !important;
} /* "Muito bem!" (Well done!) with the same weight as the defeat title (fitArc shrinks it if it doesn't fit) */
@media (max-height: 500px) {
  body.land .hwrap .hlabel {
    display: none !important;
  }
} /* landscape phone: no room for a label between the buttons; the icons are enough */
.map-sign.so-jardim {
  display: none !important;
}
body .modal.lose .row .btn:nth-child(1) {
  padding-right: 6cqw !important;
  padding-left: 2cqw !important;
} /* the "Desfazer" (Undo) text moves away from the badge */
/* menu: mole box with its own width (does not wait for the image to load; in Safari the first frame's 0 width left it on the right) and the drawing fitted in the middle of it */
body.s-home .home-mascot {
  width: 26vh !important;
  height: 28vh !important;
  object-fit: contain !important;
  object-position: 50% 100% !important;
}
/* reinforcement (the old per-orientation rules were more specific and won): */
/* menu mole in a box of its own size, centered by margins, without translate (in Safari the % translate was not redone when the image loaded) */
html body.s-home .home-mascot.home-mascot {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  width: 26vh !important;
  object-fit: contain !important;
  object-position: 50% 100% !important;
}
/* coin of the pills at mid height (an old portrait rule lifted half a coin) */
html body .topbar .pill.coins i {
  transform: none !important;
  top: auto !important;
  align-self: center !important;
}
/* mole shadow in code (the standing poses come without a shadow; the jump has its own, which shows the height) */
.home-mascot,
.mascot {
  background: radial-gradient(ellipse 34% 4.2% at 50% 97.6%, rgba(58, 36, 22, 0.32), rgba(58, 36, 22, 0) 100%) no-repeat !important;
}
.home-mascot[src*='pula2'],
.mascot[src*='pula2'] {
  background-size: 80% 100% !important;
  background-position: 50% 0 !important;
} /* in the jump the shadow stays on the ground and smaller */
/* UI juice */
.fx-ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.saindo,
.saindo * {
  pointer-events: none !important;
} /* a closing window does not receive touch */
.fx-ui {
  z-index: 300;
}
.fx-estrela {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  filter: drop-shadow(0 1px 0 rgba(90, 50, 10, 0.55));
}
.fx-anel {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  border: 4px solid #ffd23d;
  box-shadow:
    0 0 0 1.5px rgba(122, 72, 20, 0.45),
    0 0 14px rgba(255, 210, 80, 0.7);
}
button,
.stop {
  transition: scale 0.28s cubic-bezier(0.3, 1.7, 0.5, 1);
} /* released with a spring */
button:active:not(:disabled),
.stop:active:not(:disabled) {
  scale: 0.93;
  transition-duration: 0.08s;
} /* sinks on touch */
.veu {
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  display: none;
  background: radial-gradient(circle at 50% 50%, #fff6dc 0%, #e6f3bf 45%, #9fd36c 100%);
}
.veu.on {
  display: block;
  pointer-events: auto;
} /* the iris (mask) is animated by JS */
.iris-flor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(32vmin, 220px);
  margin: calc(min(32vmin, 220px) / -2) 0 0 calc(min(32vmin, 220px) / -2);
  scale: 0;
  filter: drop-shadow(0 4px 0 rgba(90, 55, 20, 0.25));
}
@media (prefers-reduced-motion: reduce) {
  .fx-ui,
  .veu {
    display: none !important;
  }
  button,
  .stop {
    transition: none;
  }
}
.iris-anel {
  position: fixed;
  z-index: 251;
  pointer-events: none;
  display: none;
  border-radius: 50%;
  box-sizing: border-box;
  border: 7px solid #fff4d2;
  box-shadow:
    0 0 0 3px #7a4a24,
    inset 0 0 0 3px #7a4a24,
    0 0 18px rgba(255, 230, 150, 0.6);
}
.iris-anel.on {
  display: block;
}
/* weather per world (behind the tiles and the UI) */
#clima {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
#clima .gota {
  position: absolute;
  left: var(--x);
  top: -6vh;
  width: var(--s);
  height: var(--s);
  animation: cai var(--d) linear var(--a) infinite;
  will-change: transform;
}
@keyframes cai {
  0% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: var(--b) 56vh;
  }
  100% {
    translate: calc(var(--b) * -0.6) 115vh;
    rotate: calc(var(--g) * 540deg);
  }
}
.clima-neve .gota {
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 72%);
  filter: drop-shadow(0 0 2px rgba(180, 210, 240, 0.8));
}
.clima-pomar .gota {
  height: auto;
  opacity: 0.92;
  filter: drop-shadow(0 2px 1px rgba(90, 40, 10, 0.25));
}
.clima-jardim .gota {
  height: calc(var(--s) * 1.35);
  border-radius: 60% 0 60% 0;
  background: linear-gradient(135deg, #ffd1e4, #ff8fbf);
  opacity: 0.85;
}
.clima-lago .gota {
  top: auto;
  bottom: -4vh;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0%, rgba(255, 240, 160, 0.8) 40%, rgba(255, 240, 160, 0) 72%);
  animation-name: sobe;
}
@keyframes sobe {
  0% {
    translate: 0 0;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  50% {
    translate: var(--b) -50vh;
    opacity: 0.4;
  }
  70% {
    opacity: 1;
  }
  100% {
    translate: calc(var(--b) * -0.5) -105vh;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #clima {
    display: none;
  }
}

/* "tap to start" screen (08/11): menu behind it without the buttons; the text pulses in place of Play */
.start-tap {
  position: fixed;
  inset: 0;
  z-index: 260;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.start-tap span {
  position: absolute;
  translate: -50% -50%;
  white-space: nowrap;
  font-weight: 700;
  color: #fff;
  font-size: clamp(26px, min(7.5vmin, 7.6vw), 60px);
  -webkit-text-stroke: 0.22em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.12em 0 var(--ink);
  letter-spacing: 0.03em;
  animation: tapPulso 1.3s ease-in-out infinite;
}
.start-tap.out {
  pointer-events: none;
}
.start-tap.out span {
  animation: tapSai 0.32s ease-in forwards;
}
@keyframes tapPulso {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.08;
  }
}
@keyframes tapSai {
  to {
    scale: 1.25;
    opacity: 0;
  }
}
html body.s-start .home .btn.go,
html body.s-start .home-row,
html body.s-start .home-coins,
html body.s-start .home-next,
html body.s-start .home-bar {
  visibility: hidden !important;
}
html body.s-start-in .home .btn.go,
html body.s-start-in .home-row,
html body.s-start-in .home-coins,
html body.s-start-in .home-bar {
  animation: botoesVem 0.45s ease-out both !important;
}
@keyframes botoesVem {
  from {
    opacity: 0;
    scale: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .start-tap span,
  .start-tap.out span {
    animation: none;
  }
  .start-tap.out span {
    opacity: 0;
  }
}

/* settings in the pause's style (08/11): effects and music volume inside the cream pills */
html body .modal.pause .vol-row[data-a] {
  justify-content: flex-start !important;
  gap: 1.2cqw !important;
  padding: 0 0 0.6cqh !important;
  font-size: 3cqh !important;
  cursor: default;
}
html body .modal.pause .vol-row span {
  flex: none;
}
html body .modal.pause .vol-row .bi {
  width: 4.4cqh !important;
  height: 4.4cqh !important;
  margin-left: -2cqw;
} /* goes slightly into the pill's rounded end */
html body .modal.pause .vol-row input[type='range'] {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 2.4cqh;
  margin: 0 -2.5cqw 0 1cqw;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 99px;
  border: 0.35cqh solid #8a5a2b;
  background:
    linear-gradient(#7fdc55, #3fae37) 0 / var(--p, 50%) 100% no-repeat,
    #f3e2c0;
}
html body .modal.pause .vol-row input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4.6cqh;
  height: 4.6cqh;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff3b0, #ffc531 55%, #e89a10);
  border: 0.45cqh solid #5a3518;
  box-shadow: 0 0.35cqh 0 #5a3518;
}
html body .modal.pause .vol-row input[type='range']::-moz-range-thumb {
  width: 4.6cqh;
  height: 4.6cqh;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff3b0, #ffc531 55%, #e89a10);
  border: 0.45cqh solid #5a3518;
  box-shadow: 0 0.35cqh 0 #5a3518;
}

/* "|" lines on the pills (08/11): the art's core sits underneath and extends 2 px into each end; if the browser opens a gap between the border-image slices, the same color shows, not a line. The ends stay whole (no distortion). */
html body .modal .btn.go {
  background: url(../assets/ui/pilula-verde-meio.webp) center / calc(100% - var(--ph) + 4px) 100% no-repeat !important;
}
html body .modal .btn.ghost {
  background: url(../assets/ui/pilula-creme-meio.webp) center / calc(100% - var(--ph) + 4px) 100% no-repeat !important;
}
html body .modal .btn.yellow {
  background: url(../assets/ui/pilula-amarelo-meio.webp) center / calc(100% - var(--ph) + 4px) 100% no-repeat !important;
}
html body.land .topbar .pill {
  background: url(../assets/ui/pilula-hud-meio.webp) center / calc(100% - 9.2 * var(--uh) + 4px) 100% no-repeat !important;
}
html body .modal .btn.go,
html body .modal .btn.ghost,
html body .modal .btn.yellow,
html body.land .topbar .pill {
  background-origin: border-box !important;
  background-clip: border-box !important;
} /* the core's % counts the whole pill */
.topbar .pill,
.topbar .pill * {
  white-space: nowrap !important;
} /* "レベル" does not break onto two lines */

/* guided tutorial of level 1 (08/11) */
.tut-catch {
  position: fixed;
  inset: 0;
  z-index: 40;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
} /* explanation step: a tap anywhere continues */
.bubble small {
  display: block;
  margin-top: 0.35em;
  font-size: 0.72em;
  opacity: 0.75;
  animation: tapPulso 1.3s ease-in-out infinite;
}
.bubble.troca {
  animation: balaoTroca 0.36s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes balaoTroca {
  from {
    scale: 0.86;
    opacity: 0.4;
  }
}
body.tut-guia .helpers,
body.tut-guia .helper {
  pointer-events: none !important;
} /* helpers without touch until "now it's up to you" */
body.tut .bubble,
body.tut .hand,
body.tut .toque {
  z-index: 41;
}
.tut-moldura {
  position: fixed;
  z-index: 39;
  pointer-events: none;
  box-sizing: border-box;
  border: 4px solid #ffd84a;
  box-shadow:
    0 0 0 3px rgba(90, 53, 24, 0.55),
    0 0 22px 6px rgba(255, 216, 74, 0.75);
  animation: molduraPulso 1.1s ease-in-out infinite;
}
@keyframes molduraPulso {
  50% {
    box-shadow:
      0 0 0 3px rgba(90, 53, 24, 0.55),
      0 0 34px 12px rgba(255, 216, 74, 0.95);
    scale: 1.03;
  }
}
body:not(.land) .bubble {
  height: auto !important;
  min-height: 14vh;
} /* the bubble grows with the text (9-slice frame, no distortion) */
@media (prefers-reduced-motion: reduce) {
  .tut-moldura {
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bubble.troca,
  .bubble small {
    animation: none;
  }
}

/* victory "Next": smaller play icon (08/11) */
html body .modal.win .row .btn:nth-child(2) .bi {
  width: 4.1cqh !important;
  height: 4.1cqh !important;
}

/* End of css/04-overrides.css */