/* Mahjong Treasure Quest styles, part 3 of 4: details and polish of the windows, ribbons, buttons and the map.
   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 (many pirate theme rules are in 04-overrides.css). */

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 octopus 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 octopus 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 level: larger full-body octopus, 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 octopus 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 octopus; 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 octopus, 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 (octopus 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 octopus (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: none 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: none 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: none !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: octopus 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 octopus 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 */
/* level octopus: 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 octopus 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: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmd: none;
  --wmu: none;
  --wma: none;
  --wmpu: none;
  --wmpa: none;
}
body[data-world='2'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmd: none;
  --wmu: none;
  --wma: none;
  --wmpu: none;
  --wmpa: none;
}
body[data-world='3'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmd: none;
  --wmu: none;
  --wma: none;
  --wmpu: none;
  --wmpa: none;
}
.topbar .map-prev,
.topbar .map-next {
  background: none 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 octopus (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 octopus (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, world 2: the map octopus 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-world-1 {
  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: octopus 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 octopus 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;
}
/* octopus 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-cave .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: none center / calc(100% - var(--ph) + 4px) 100% no-repeat !important;
}
html body .modal .btn.ghost {
  background: none center / calc(100% - var(--ph) + 4px) 100% no-repeat !important;
}
html body .modal .btn.yellow {
  background: none center / calc(100% - var(--ph) + 4px) 100% no-repeat !important;
}
html body.land .topbar .pill {
  background: none 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: 0;
  box-shadow:
    0 0 20px 5px rgba(255, 233, 163, 0.62),
    inset 0 0 12px rgba(255, 248, 211, 0.55);
  animation: molduraPulso 1.8s ease-in-out infinite;
}
@keyframes molduraPulso {
  50% {
    box-shadow:
      0 0 30px 8px rgba(255, 235, 170, 0.8),
      inset 0 0 16px rgba(255, 248, 211, 0.7);
  }
}
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/game.css */

/* Start screen: separate background art, no text in the scenery. */
body.land.s-home {
  --bg: none;
  --bgu: none;
}
body:not(.land).s-home {
  background-image: none;
}
body.s-home .logo .lp {
  visibility: hidden;
}
/* New backgrounds: the board and the interface are still drawn by the game. */
body[data-world='0'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmd: none;
  --wmu: none;
  --wma: none;
  --wmpu: none;
  --wmpa: none;
}
body[data-world='1'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmd: none;
  --wmu: none;
  --wma: none;
  --wmpu: none;
  --wmpa: none;
}
body[data-world='2'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmd: none;
  --wmu: none;
  --wma: none;
  --wmpu: none;
  --wmpa: none;
}
body[data-world='3'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmd: none;
  --wmu: none;
  --wma: none;
  --wmpu: none;
  --wmpa: none;
}
body.s-home .map-sign,
.map-sign {
  display: none !important;
}
/* Portrait compositions keep the path and the usable area of the board. */
body[data-world='0'] {
  --wf: none;
  --wm: none;
  --wmpu: none;
  --wmpa: none;
}
body[data-world='1'] {
  --wf: none;
  --wm: none;
  --wmpu: none;
  --wmpa: none;
}
body[data-world='2'] {
  --wf: none;
  --wm: none;
  --wmpu: none;
  --wmpa: none;
}
body[data-world='3'] {
  --wf: none;
  --wm: none;
  --wmpu: none;
  --wmpa: none;
}
/* The portrait maps do not use the extra vertical extension of the first world. */
.map.pe-tall {
  background: #a9d865 var(--wm) center / cover no-repeat !important;
}
.map.pe-tall .map-art {
  background: var(--wm) center / 100% 100% no-repeat !important;
}
.map.pe-tall .map-art {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}
.map.pe-tall .map-art {
  -webkit-mask-image: none;
  mask-image: none;
}
body:not(.land).s-home {
  background-image: none;
}
body .modal.lose .scene {
  background-image: none !important;
}
body.s-home .logo .lp {
  visibility: visible;
}
body.s-home .home .btn.big {
  background-image: none !important;
}
body:not(.land).s-home .home .btn.big {
  background-image: none !important;
}
/* On wide screens, fill the sides with the same art, softened. */
.map.col:has(.map-art.land)::before {
  inset: -30px !important;
  background: var(--wmd) center / cover no-repeat !important;
  filter: blur(16px) brightness(0.9) !important;
}
.map.col:not(:has(.map-art.land))::before {
  inset: -30px !important;
  background: var(--wm) center / cover no-repeat !important;
  filter: blur(16px) brightness(0.9) !important;
}
.map.col .map-art.land {
  background-image: var(--wmd) !important;
}
.map.col .map-art:not(.land) {
  background-image: var(--wm) !important;
}
body .modal.win .ribbon {
  border-image-source: none !important;
  border-image-slice: 0 500 fill !important;
}
body .modal.lose .ribbon {
  background-image: none !important;
}
body .modal.lose .mini-tray i {
  background-size: 400% 300% !important;
}
body .modal.lose .scene {
  background-size: 100% 100% !important;
}
body .modal.win .ribbon {
  border: 0 !important;
  border-image: none !important;
  background: none center / 100% 155% no-repeat !important;
}
body.land:not(.s-home) .mascot {
  scale: 1 1 !important;
}
body.s-home .home .logo .lp img {
  rotate: 0deg !important;
}
body .modal.win .m-face {
  top: -27cqh;
}
body .modal.win .ribbon .arc {
  left: 0 !important;
  width: 100% !important;
  top: -0.6cqh !important;
}
body .modal.win .earn {
  left: 27.85cqw !important;
}
body .modal.win:has(.all-done) .stars {
  top: 3.5cqh;
  height: 12.5cqh;
}
body .modal.win .all-done {
  left: 6cqw;
  top: 16.2cqh;
  width: 79cqw;
  height: 3.5cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  font-size: min(2cqh, 4cqw);
  font-weight: 700;
  color: #5a3518;
}
body .modal.win:has(.all-done) .earn,
body .modal.win:has(.all-done) .w-flor {
  top: 20.2cqh;
}
body .modal.lose .mini-tray i {
  background-size: 72% !important;
  background-position: center !important;
}

@keyframes drift-fall {
  0% {
    translate: 0 0;
    rotate: 0deg;
  }
  25% {
    translate: calc(var(--b) * 1.1) 28vh;
  }
  50% {
    translate: calc(var(--b) * -0.5) 56vh;
  }
  75% {
    translate: calc(var(--b) * 1.3) 84vh;
  }
  100% {
    translate: calc(var(--b) * -0.6) 115vh;
    rotate: calc(var(--g) * 540deg);
  }
}

/* Panoramic art for the start screen on ultra-wide monitors. */
@media (min-aspect-ratio: 2/1) {
  body[data-world='0'] {
    --wmu: none;
    --wflu: none;
  }
  body[data-world='1'] {
    --wmu: none;
    --wflu: none;
  }
  body[data-world='2'] {
    --wmu: none;
    --wflu: none;
  }
  body[data-world='3'] {
    --wmu: none;
    --wflu: none;
  }
  body.land:not(.s-home)::before {
    background: var(--wflu) center / cover no-repeat !important;
  }
  body.land.s-home::before {
    background: #7fbf55 none center / cover no-repeat !important;
  }
  .map.col:has(.map-art.land)::before {
    inset: 0 !important;
    background: var(--wmu) center / cover no-repeat !important;
    filter: none !important;
  }
  .map.col .map-art.land {
    background-image: none !important;
  }
  .map.col .map-art.land::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--wmd) center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }
}

/* Mahjong Treasure Quest: pirate scenery and interface layer. */
body[data-world='0'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmpa: var(--wm);
  --wmpu: var(--wm);
  --wmd: none;
  --wmu: var(--wmd);
}
body[data-world='1'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmpa: var(--wm);
  --wmpu: var(--wm);
  --wmd: none;
  --wmu: var(--wmd);
}
body[data-world='2'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmpa: var(--wm);
  --wmpu: var(--wm);
  --wmd: none;
  --wmu: var(--wmd);
}
body[data-world='3'] {
  --wf: none;
  --wfl: none;
  --wflu: none;
  --wm: none;
  --wmpa: var(--wm);
  --wmpu: var(--wm);
  --wmd: none;
  --wmu: var(--wmd);
}
body.land.s-home::before {
  background: #20174f none center / cover no-repeat !important;
}
body:not(.land).s-home {
  background-image: none;
}
body.land:not(.s-home)::before {
  background: var(--wfl) center / cover no-repeat !important;
}
.map.col:has(.map-art.land)::before {
  inset: 0 !important;
  background: var(--wmd) center / cover no-repeat !important;
  filter: none !important;
}
.map.col .map-art.land {
  background: none !important;
}
.map.col .map-art.land::before {
  display: none !important;
}
body.s-home .logo .lp,
.home-flores,
.front-flowers {
  display: none !important;
}
body.s-home .home .btn.big {
  background-image: none !important;
}
body .modal.win .ribbon,
body .modal.lose .ribbon {
  border: 0 !important;
  border-image: none !important;
  background: none center / 100% 155% no-repeat !important;
}
body .modal.lose .scene {
  background: none !important;
}
body .modal.win::before,
body .modal.win::after {
  display: none !important;
}
body .modal::before {
  border-image-source: none !important;
}
/* Pirate buttons from the same sprite sheet: the click area is still the original button. */
body .home-row .small-btn,
body .topbar .round,
body .helper,
body .modal .lv-btn {
  background-image: url(../assets/treasure/ui-icons.png) !important;
  background-repeat: no-repeat !important;
  background-size: 400% 300% !important;
  border: 0 !important;
  box-shadow: none !important;
}
body .home-row .small-btn:not(.home-gear),
body .topbar .snd-btn,
body .topbar .map-snd {
  background-position: 66.666% 0 !important;
}
body .home-row .home-gear,
body .topbar .gear-btn,
body .topbar .map-gear {
  background-position: 100% 0 !important;
}
body .topbar .yellow-btn,
body .topbar .map-prev,
body .modal .lv-btn {
  background-position: 0 0 !important;
}
body .topbar .map-next {
  background-position: 33.333% 0 !important;
}
body .helper[data-h='undo'] {
  background-position: 66.666% 50% !important;
}
body .helper[data-h='hint'] {
  background-position: 0 50% !important;
}
body .helper[data-h='shuffle'] {
  background-position: 33.333% 50% !important;
}
body .home-row .small-btn > img,
body .topbar .round > img,
body .topbar .round > svg,
body .helper > img {
  visibility: hidden !important;
}
body .topbar .round .spark,
body .helper .spark {
  display: none !important;
}
html body .modal.win::before,
html body .modal.lose::before,
html body .modal.pause::before {
  display: block !important;
  content: '';
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  border: 0 !important;
  border-image: none !important;
  background: none center / 100% 100% no-repeat !important;
  z-index: -1;
}
html body.land.s-home .home-row .small-btn,
html body:not(.land).s-home .home-row .small-btn,
html body.land .topbar .round,
html body:not(.land) .topbar .round {
  background-image: url(../assets/treasure/ui-icons.png) !important;
  background-size: 400% 300% !important;
  background-repeat: no-repeat !important;
}
html body .topbar .yellow-btn {
  background-position: 0 0 !important;
}
html body .topbar .map-next {
  background-position: 0 0 !important;
}
html body .topbar .gear-btn,
html body .home-gear {
  background-position: 100% 0 !important;
}
html body .home-row .small-btn:not(.home-gear) {
  background-position: 66.666% 0 !important;
}
body[data-world='1'] {
  --wmd: none;
}
body[data-world='2'] {
  --wmd: none;
}
body[data-world='3'] {
  --wmd: none;
}
/* Reset the previous shorthand before applying the pirate sprite sheet. */
html body .home-row .small-btn:not(.home-gear),
html body .topbar .snd-btn,
html body .topbar .map-snd {
  background: url(../assets/treasure/ui-icons.png) 66.666% 0 / 400% 300% no-repeat !important;
}
html body .home-row .home-gear,
html body .topbar .gear-btn,
html body .topbar .map-gear {
  background: url(../assets/treasure/ui-icons.png) 100% 0 / 400% 300% no-repeat !important;
}
html body .topbar .yellow-btn,
html body .topbar .map-prev,
html body .modal .lv-btn {
  background: url(../assets/treasure/ui-icons.png) 0 0 / 400% 300% no-repeat !important;
}
html body .topbar .map-next {
  background: url(../assets/treasure/ui-icons.png) 0 0 / 400% 300% no-repeat !important;
}
html body.land.s-home .home-row .small-btn:not(.home-gear) {
  background: url(../assets/treasure/ui-icons.png) 66.666% 0 / 400% 300% no-repeat !important;
}
html body.land.s-home .home-row .home-gear {
  background: url(../assets/treasure/ui-icons.png) 100% 0 / 400% 300% no-repeat !important;
}
html body .coins i,
html body .earn i {
  background: url(../assets/treasure/ui-icons.png) 100% 100% / 400% 300% no-repeat !important;
  border: 0 !important;
}
html body .modal.win .w-confete {
  display: none !important;
}
html body .modal.lose .lose-head::before,
html body .modal.lose .lose-head::after {
  display: none !important;
}
html body .modal.win .btn.go,
html body .modal.lose .btn.go,
html body .modal.lose .btn.yellow {
  background: none center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-image: none !important;
  color: white !important;
}
html body .modal.lose .mini-tray {
  background: none center / 100% 150% no-repeat !important;
}
html body .modal.lose .l-folha,
html body .modal .sep-flor {
  display: none !important;
}
html body .modal.settings .ribbon,
html body .modal.pause .ribbon,
html body .modal.sound .ribbon {
  background: none center / 100% 150% no-repeat !important;
  border: 0 !important;
  border-image: none !important;
}
html body .modal.win .row .btn.go,
html body .modal.lose .row .btn.go,
html body .modal.lose .row .btn.yellow {
  background: none center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-image: none !important;
  color: white !important;
}
html body.land .topbar .round.small.gear-btn,
html body:not(.land) .topbar .round.small.gear-btn {
  background: url(../assets/treasure/ui-icons.png) 100% 0 / 400% 300% no-repeat !important;
}
html body.land .topbar .round.small.yellow-btn,
html body:not(.land) .topbar .round.small.yellow-btn {
  background: url(../assets/treasure/ui-icons.png) 0 0 / 400% 300% no-repeat !important;
}
html body .modal.win .row .btn.ghost.lv-btn {
  background: url(../assets/treasure/ui-icons.png) 0 0 / 400% 300% no-repeat !important;
}
body[data-world='2'] {
  --wfl: none;
  --wflu: var(--wfl);
}
.sheet-icon {
  display: inline-block;
  background-image: url(../assets/treasure/ui-icons.png);
  background-size: 400% 300%;
  background-repeat: no-repeat;
  flex: none;
}
html body .home-row .small-btn > .sheet-icon,
html body .topbar .round > .sheet-icon {
  visibility: hidden !important;
}
html body .map-art .stop {
  background: none center / 145% 145% no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .map-art .stop.locked {
  background-image: none !important;
}
html body .coins i,
html body .earn i {
  background: none center / contain no-repeat !important;
}
html body .map-art .stop {
  background-size: 118% 118% !important;
}
/* The map keeps the height of the panoramic art so the three rows stay on the path. */
html body .map.col:has(.map-art.land)::before {
  background-size: max(100vw, 300vh) 100% !important;
}
html body .modal.pause .col .btn,
html body .modal.settings .col .btn.go,
html body .modal.sound .col .btn.go {
  background: none center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-image: none !important;
  color: #fff !important;
}
html body:not(.land).s-home .home .btn.big {
  background: none center / 100% 100% no-repeat !important;
}
html body:not(.land).s-home .home-row .small-btn:not(.home-gear) {
  background: url(../assets/treasure/ui-icons.png) 66.666% 0 / 400% 300% no-repeat !important;
}
html body:not(.land).s-home .home-row .home-gear {
  background: url(../assets/treasure/ui-icons.png) 100% 0 / 400% 300% no-repeat !important;
}
html body .modal.lose .mini-tray i {
  top: 19% !important;
  width: 11.6% !important;
  height: 62% !important;
}
html body .modal.lose .mini-tray i:nth-child(1) {
  left: 7.4% !important;
}
html body .modal.lose .mini-tray i:nth-child(2) {
  left: 19.5% !important;
}
html body .modal.lose .mini-tray i:nth-child(3) {
  left: 31.6% !important;
}
html body .modal.lose .mini-tray i:nth-child(4) {
  left: 43.7% !important;
}
html body .modal.lose .mini-tray i:nth-child(5) {
  left: 55.8% !important;
}
html body .modal.lose .mini-tray i:nth-child(6) {
  left: 67.9% !important;
}
html body .modal.lose .mini-tray i:nth-child(7) {
  left: 80% !important;
}
html body .map-art .stop .lock {
  background: url(../assets/ui-kit/lock.png) center / contain no-repeat !important;
}
html body .hand {
  rotate: 90deg;
}
html body .hand {
  width: clamp(100px, 24vw, 160px) !important;
}
html body.land .hand {
  width: min(calc(12 * var(--su) / 100), 20vh) !important;
}
html body .modal.win .row .btn:nth-child(2) .sheet-icon {
  filter: none !important;
}

/* End of css/03-details.css */