/* Mahjong Garden 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. */

.arc {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.arc text {
  font-weight: 900;
  font-size: 64px;
  paint-order: stroke fill;
  stroke-linejoin: round;
  dominant-baseline: middle;
}
.modal.win .ribbon .arc text {
  fill: #5a3518;
  font-size: 92px;
}
.modal.lose .ribbon .arc text {
  fill: #fff;
  stroke: #7a3a1c;
  stroke-width: 9px;
  font-size: 80px;
}
.map-head .sign .arc text {
  fill: #56270c;
  font-size: 58px;
}
body .modal.win .ribbon,
body .modal.lose .ribbon {
  padding: 1cqh 0 !important;
}
body .modal.pause .ribbon span {
  font-size: 4.8cqh !important;
  font-weight: 900;
}
body .win-back,
body .lose-back {
  background: rgba(60, 40, 0, 0.14) !important;
}
body:not(.land) .pause-back {
  backdrop-filter: none !important;
  background: rgba(30, 20, 0, 0.38) !important;
}
.pause-blur {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  backdrop-filter: blur(1.4px);
  pointer-events: none;
  z-index: 19;
}
.helper .badge,
.modal .bbadge {
  background: #2e9a2a !important;
}
.helper img {
  width: 64%;
  height: 64%;
}
body:not(.land).s-home .home-mascot {
  width: calc(45 * var(--pu) / 100) !important;
  left: calc(var(--px) + 34 * var(--pw) / 100) !important;
  top: calc(var(--sat) + 10vh) !important;
}
.t-raio,
.t-faisca {
  position: fixed;
  pointer-events: none;
  z-index: 4;
}
.t-raio .spark {
  position: static;
  width: 100%;
  height: 100%;
}
body:not(.land) .t-raio.cima {
  left: calc(var(--px) + 38.8 * var(--pw) / 100);
  top: 26.6vh;
  width: calc(10.6 * var(--pu) / 100);
  height: 3.3vh;
  transform: rotate(60deg);
}
body:not(.land) .t-raio.mao {
  left: calc(var(--px) + 83.4 * var(--pw) / 100);
  top: 44vh;
  width: calc(8 * var(--pu) / 100);
  height: 4.5vh;
  transform: scaleX(-1);
}
body:not(.land) .t-faisca.e {
  left: calc(var(--px) + 4.8 * var(--pw) / 100);
  top: 71.2vh;
  width: calc(6.4 * var(--pu) / 100);
  height: 3.7vh;
  object-fit: contain;
}
body:not(.land) .t-faisca.d {
  left: calc(var(--px) + 87 * var(--pw) / 100);
  top: 70.9vh;
  width: calc(3.5 * var(--pu) / 100);
  height: 1.8vh;
  object-fit: contain;
}
body.land .t-raio,
body.land .t-faisca {
  display: none;
}

body:not(.land).s-home .home-row .small-btn {
  background: url(../assets/ui/btn-som-inicio.webp) center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
body:not(.land).s-home .home-row .home-gear {
  background-image: url(../assets/ui/btn-gear-inicio.webp) !important;
}
body:not(.land).s-home .home-row .small-btn img {
  display: none;
}
body .modal.lose .mini-tray {
  background: url(../assets/ui/mini-bandeja.webp) center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0 4.1% !important;
  gap: 0.55% !important;
  justify-content: flex-start !important;
} /* cells in the art: start at 4.1%, 12.8% each, 0.55% apart */
body .modal.lose .mini-tray i {
  width: 12.8% !important;
  flex: none !important;
  margin: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  background-size: 72% !important;
  border-radius: 1.2cqh;
}
body.land .hwrap:nth-child(1) {
  top: 13.8vh;
  height: calc(21 * var(--uh));
  width: calc(11.1 * var(--su) / 100);
  left: calc(var(--sx) + 84.4 * var(--sw) / 100);
}
body.land .hwrap:nth-child(3) {
  left: calc(var(--sx) + 83.9 * var(--sw) / 100);
  top: 63.8vh;
  height: calc(22 * var(--uh));
  width: calc(12.3 * var(--su) / 100);
}
body.land.s-home .home-rays {
  left: calc(var(--sx) + 23 * var(--sw) / 100);
  width: calc(5.5 * var(--su) / 100);
}
body:not(.land) .hand {
  width: calc(22 * var(--pu) / 100) !important;
  height: 13.8vh !important;
  object-fit: contain;
}
body.land.s-home .home-next .stop.cur {
  background-image: url(../assets/ui/parada-ouro.webp) !important;
  aspect-ratio: 300 / 251 !important;
}
body.land.s-home .home-next .stop.cur .sstars {
  display: none;
}
body.land.s-home .home-next .stop.cur b {
  top: 34%;
  color: #56270c !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 900;
}
body.land.s-home .bar-btn img {
  height: calc(9 * var(--uh)) !important;
  width: auto !important;
  max-width: 80%;
  object-fit: contain;
  margin-top: -2.2vh;
}
body.land:not(.s-home) .mascot {
  left: calc(var(--sx) + 1.2 * var(--sw) / 100) !important;
  top: 38.8vh !important;
  width: calc(22.4 * var(--su) / 100) !important;
}
body:not(.land) .topbar .coins i,
body:not(.land) .home-coins i {
  left: 0 !important;
  margin: 0 !important;
  width: calc(11 * var(--pu) / 100) !important;
  height: 6vh !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
body .modal.win .ribbon .arc {
  position: absolute;
  left: -6cqh;
  top: 0;
  width: calc(100% + 12cqh);
  height: 100%;
}
body .modal.win .earn {
  left: 25.9cqw !important;
  width: 35.3cqw !important;
  position: absolute;
  padding-left: 12cqw !important;
  box-sizing: border-box;
}
body .modal.win .earn i {
  position: absolute;
  left: 3.6cqw;
  top: 50%;
  transform: translateY(-50%);
  width: 12.4cqw !important;
  height: 7cqh !important;
}
body .modal.lose .scene {
  background: url(../assets/ui/cena-derrota-2.webp) center bottom / cover no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: 0 !important;
}
body .modal.pause .switch b {
  width: 11.7cqw !important;
  height: 3.8cqh !important;
}
.modal.win .w-brilho-t,
.modal.win .w-brilho-e {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
  z-index: -1;
}
body .modal.win .w-brilho-t {
  left: 21.8cqw;
  top: -23.4cqh;
  width: 49.6cqw;
  height: 17.3cqh;
} /* the window is scaled to 0.9 */
body .modal.win .w-brilho-e {
  left: 2.9cqw;
  top: 0.5cqh;
  width: 82.7cqw;
  height: 17.3cqh;
}
body.land .hwrap:nth-child(3) .helper .spark {
  width: calc(3.3 * var(--su) / 100) !important;
  height: calc(3.7 * var(--uh)) !important;
}
body:not(.land) .bubble {
  font-size: calc(4.6 * var(--pu) / 100) !important;
  border-width: 3.6vh 1.6vh 4vh 1.8vh !important;
} /* bubble text 16% larger; the art (border-image-width) does not change, only the text area */
/* landscape: HUD grows with the height (big 16:9 monitor and the ultrawide frame), nothing in fixed px */
body.land .pill b,
body.land .pill.coins b,
body.land .home-coins b {
  font-size: calc(5.4 * var(--uh)) !important;
}
body.land .topbar .coins i,
body.land .home-coins i {
  position: absolute;
  left: 0 !important;
  margin: 0 !important;
  top: 50%;
  transform: translateY(-50%);
  width: calc(5 * var(--su) / 100) !important;
  height: calc(9.5 * var(--uh)) !important;
}
.map.col::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: var(--wm) center / cover;
  filter: blur(14px) brightness(0.92);
} /* sides of the map column */
/* landscape: the background art covers the stage (--sw); the sides show the same blurred background */
:root {
  --sw: 100vw;
  --sx: 0px;
  --su: 100vw;
  --pw: 100vw;
  --px: 0px;
  --pu: 100vw;
  --uh: 1vh;
}
html {
  background: #7fbf55;
}
body.land {
  --bg: var(--wfl);
  --bgu: var(--wflu);
  background: none !important;
}
body.land.s-home {
  --bg: url(../assets/fundo-inicio-largo.webp);
  --bgu: url(../assets/fundo-inicio-ultra.webp);
}
body.land::before,
body.land::after {
  content: '';
  position: fixed;
  pointer-events: none;
}
body.land::before {
  inset: -40px;
  z-index: -2;
  background: var(--bg) center / cover no-repeat;
  filter: blur(16px) brightness(0.9);
}
body.land::after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(var(--su), calc(177.7 * var(--uh)));
  height: max(calc(100 * var(--uh)), calc(var(--su) / 1.777));
  z-index: -1;
  background: var(--bg) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
body.land .helpers {
  pointer-events: none !important;
} /* the box fills the whole screen in landscape: only the buttons receive touch */
body.land .helpers > * {
  pointer-events: auto !important;
}
.modal-back {
  container-type: size;
  contain: layout;
} /* contain: layout pins the fixed children to the box; no translateZ (it blurred the window) */
body .modal-back {
  position: fixed !important;
  --bw: min(100vw, calc(100vh * 941 / 1672));
  --bh: min(100vh, calc(100vw * 1672 / 941));
  inset: calc((100vh - var(--bh)) / 2) auto auto calc((100vw - var(--bw)) / 2) !important;
  width: var(--bw) !important;
  height: var(--bh) !important;
  transform: none !important;
}

/* landscape tutorial: the bubble sits in the left panel, between the plaque and the mole (covering neither HUD nor board) */
body.land .bubble {
  position: fixed;
  left: calc(var(--sx) + 1.5 * var(--sw) / 100);
  right: auto;
  top: 21vh;
  width: calc(21 * var(--su) / 100);
  max-width: none;
  font-size: calc(3 * var(--uh));
  padding: 1.4vh 1.6vh;
  box-sizing: border-box;
}
body.land .bubble::after {
  display: none;
}
body.land.s-home .home-coins,
body.land.s-home .home-next,
body.land.s-home .home-bar,
body.land.s-home .home-rays,
body.land.s-home .ray {
  display: none !important;
}
body.land.s-home .home .logo {
  left: 50% !important;
  top: 8vh !important;
  height: min(calc(52 * var(--uh)), 460px) !important;
  width: auto !important;
  transform: translateX(-50%) !important;
  max-width: none !important;
}
body.land.s-home .home .btn.big {
  left: 50% !important;
  top: auto !important;
  bottom: 17vh !important;
  width: min(calc(34 * var(--su) / 100), 460px) !important;
  height: min(calc(16 * var(--uh)), 124px) !important;
  margin: 0 0 0 calc(min(calc(34 * var(--su) / 100), 460px) / -2) !important;
  padding: 0 0 1.4vh !important;
  font-size: min(calc(8.6 * var(--uh)), 66px) !important;
  -webkit-text-stroke: min(1.1vh, 9px) #5a3518 !important;
  animation: playPulse 1.6s ease-in-out infinite;
}
@keyframes playPulse {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.04;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.land.s-home .home .btn.big {
    animation: none;
  }
}
body.land.s-home .home-row .small-btn {
  display: block !important;
  position: fixed !important;
  top: 3vh !important;
  left: auto !important;
  width: min(calc(12 * var(--uh)), 72px) !important;
  height: min(calc(12 * var(--uh)), 72px) !important;
  background: url(../assets/ui/btn-som-inicio.webp) center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  right: calc(var(--sx) + 2.5 * var(--sw) / 100 + min(12vh, 72px) + 1.6vh) !important;
}
body.land.s-home .home-row .home-gear {
  background-image: url(../assets/ui/btn-gear-inicio.webp) !important;
  right: calc(var(--sx) + 2.5 * var(--sw) / 100) !important;
}
body.land.s-home .home-row .small-btn img {
  display: none !important;
}
body.land.s-home .home-row .small-btn.muted {
  opacity: 0.55;
}
body.land.s-home .home-mascot {
  height: min(calc(52 * var(--uh)), 400px) !important;
  top: auto !important;
  bottom: 2vh !important;
}
body.land.s-home .home-flores {
  top: auto !important;
  bottom: -2vh !important;
  left: auto !important;
  right: calc(var(--sx) + 1 * var(--sw) / 100) !important;
  width: auto !important;
  height: min(calc(24 * var(--uh)), 170px) !important;
}
/* settings window */
.modal-back {
  z-index: 60 !important;
} /* always above the dimmer (.modal-shade, 59) */
.settings-back {
  background: rgba(30, 20, 0, 0.38);
}

.modal.settings {
  position: absolute;
  left: 12cqw;
  top: 34cqh;
  width: 76cqw;
  padding: 9cqw 6cqw 6cqw;
  box-sizing: border-box;
}
.modal.settings .ribbon {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  top: -5cqh;
  height: 8cqh;
}
.modal.settings .switches {
  display: flex;
  flex-direction: column;
  gap: 2.4cqh;
  margin: 2cqh 0 3cqh;
}
.modal.settings .switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 6cqw;
  padding: 1.4cqh 4cqw;
}
.modal.settings .switch b {
  width: 18cqw;
  height: 5.4cqh;
}
.modal.settings .row {
  justify-content: center;
}
.modal.settings .row .btn {
  width: 46cqw;
  height: 7cqh;
  font-size: 6cqw;
}
.modal.settings .switch,
.modal.settings .row,
.modal.settings .row .btn,
.modal.settings .m-body,
.modal.settings .switches {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
}
.modal.settings .switch {
  width: 100% !important;
  height: 8cqh !important;
  box-sizing: border-box;
}
.modal.settings .row .btn {
  width: 46cqw !important;
  height: 7.5cqh !important;
  margin: 0 auto !important;
  --ph: 7.5cqh;
  color: #fff;
}
.modal.settings .ribbon {
  background-image: url(../assets/ui/faixa-pausa.webp) !important;
  background-size: 100% 100% !important;
  left: 4cqw !important;
  right: auto !important;
  width: 68cqw !important;
  top: -6cqh !important;
  height: 10cqh !important;
  z-index: 2;
}
.modal.settings .ribbon span {
  color: #5a3518;
  -webkit-text-stroke: 0;
  font-size: 7.4cqw;
  font-weight: 800;
}
.modal.settings {
  padding-top: 7cqh !important;
}
.map-art.land {
  background-image: var(--wmd);
}
.map-art.land .stop {
  padding: 0 !important;
  height: auto !important;
  aspect-ratio: 240 / 210;
} /* padding in % followed the width of the wide map */
.map.col:has(.map-art.land)::before {
  background-image: var(--wmd);
}
/* defeat mini tray: each tile in the exact cell of the art (4.1% + 13.25% per cell), without accumulating spacing */
body .modal.lose .mini-tray {
  position: absolute;
  padding: 0 !important;
  height: auto !important;
  aspect-ratio: 900 / 199;
  background-size: 100% 100% !important;
} /* box with the art's aspect ratio: the % match the cells */
body .modal.lose .mini-tray i {
  position: absolute !important;
  top: 14%;
  width: 12.8% !important;
  height: 72% !important;
  margin: 0 !important;
}
body .modal.lose .mini-tray i:nth-child(1) {
  left: 4.1%;
}
body .modal.lose .mini-tray i:nth-child(2) {
  left: 17.35%;
}
body .modal.lose .mini-tray i:nth-child(3) {
  left: 30.6%;
}
body .modal.lose .mini-tray i:nth-child(4) {
  left: 43.85%;
}
body .modal.lose .mini-tray i:nth-child(5) {
  left: 57.1%;
}
body .modal.lose .mini-tray i:nth-child(6) {
  left: 70.35%;
}
body .modal.lose .mini-tray i:nth-child(7) {
  left: 83.6%;
}
body:not(.land) .pill.level.tut {
  display: flex !important;
} /* without the logo at the top, the tutorial shows the level like the other screens */
/* menu logo in parts: title on top, 3 tiles below that swap places with a little hop */
.home .logo {
  aspect-ratio: 900 / 735;
  content: normal !important;
}
body.land.s-home .home .logo {
  aspect-ratio: 800 / 594;
}
.home .logo .lt {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
.home .logo .lt.l,
body.land .home .logo .lt.p {
  display: none;
}
body.land .home .logo .lt.l {
  display: block;
}
.home .logo .lp {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 1%;
  height: 35%;
}
.home .logo .lp img {
  position: absolute;
  top: 0;
  width: 30%;
  height: auto;
  transition:
    left 0.55s cubic-bezier(0.5, 0, 0.3, 1),
    rotate 0.55s ease;
  filter: drop-shadow(0 0.5vh 0.4vh rgba(58, 36, 22, 0.3));
}
.home .logo .lp img[data-slot='0'] {
  left: 2%;
  rotate: -7deg;
}
.home .logo .lp img[data-slot='1'] {
  left: 35%;
  rotate: 0deg;
}
.home .logo .lp img[data-slot='2'] {
  left: 68%;
  rotate: 7deg;
}
.home .logo .lp img.hop {
  animation: tileHop 0.55s ease-in-out;
}
@keyframes tileHop {
  50% {
    translate: 0 -30%;
    scale: 1.08;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home .logo .lp img {
    transition: none;
  }
  .home .logo .lp img.hop {
    animation: none;
  }
}
/* tutorial: the hand and the touch ring never capture touch (the tile beneath must receive it) */
.hand,
.toque {
  pointer-events: none !important;
}
body.land .hand {
  width: min(calc(13 * var(--su) / 100), calc(20 * var(--uh))) !important;
  height: auto !important;
}
/* full-body landscape mole: feet on the ground, anchored by the base */
body.land:not(.s-home) .mascot {
  top: auto !important;
  bottom: 3vh !important;
  height: min(calc(54 * var(--uh)), 420px) !important;
  width: auto !important;
  left: calc(var(--sx) + 2 * var(--sw) / 100) !important;
}
body.land:not(.s-home) .mascot {
  z-index: 2;
}
body.land .front-flowers {
  z-index: 1;
} /* mole's legs in front of the hydrangeas */
body.land.s-home .home-flores {
  display: none !important;
}
body.land.s-home .home-mascot {
  left: calc(var(--sx) + 9 * var(--sw) / 100) !important;
}
body.land.s-home .home-row .small-btn {
  width: min(calc(14 * var(--uh)), 96px) !important;
  height: min(calc(14 * var(--uh)), 96px) !important;
  top: 3.5vh !important;
  right: calc(var(--sx) + 3 * var(--sw) / 100 + min(calc(14 * var(--uh)), 96px) + 1.8vh) !important;
}
body.land.s-home .home-row .home-gear {
  right: calc(var(--sx) + 3 * var(--sw) / 100) !important;
}
body.land .front-flowers {
  display: none !important;
}
body.land:not(.s-home) .fx-rays,
body.land:not(.s-home) .topbar .coins .spark {
  display: none !important;
}
body.land:not(.s-home) .mascot {
  left: calc(var(--sx) + 6 * var(--sw) / 100) !important;
}
/* settings: language, vibration and volumes */
.modal.settings {
  top: 22cqh !important;
}
.modal.settings .set-list {
  display: flex;
  flex-direction: column;
  gap: 1.4cqh;
  margin: 1.2cqh 0 2.4cqh;
  position: relative !important;
}
.modal.settings .set-row {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  width: 100% !important;
  height: 7cqh !important;
  box-sizing: border-box;
  background: #fffaf0;
  border: 0.5cqw solid #c9a070 !important;
  border-radius: 3cqw;
  padding: 0 4cqw !important;
  font-size: 5cqw !important;
  font-weight: 800;
  color: #4a2a14;
  font-family: inherit;
}
.modal.settings .set-row > span {
  display: flex;
  align-items: center;
  gap: 2cqw;
  white-space: nowrap;
}
.modal.settings .set-row .bi {
  width: 6cqw !important;
  height: 6cqw !important;
}
.modal.settings .set-row input[type='range'] {
  width: 36cqw;
  accent-color: #3fae3a;
  height: 3cqh;
  margin: 0;
}
.modal.settings .set-lang {
  font: inherit;
  font-size: 4.4cqw;
  border: 0.5cqw solid #c9a070;
  border-radius: 2cqw;
  background: #fff;
  padding: 0.5cqh 2cqw;
  color: #4a2a14;
}
.modal.settings .set-row.switch b {
  width: 15cqw !important;
  height: 4.6cqh !important;
}
.modal.settings .ribbon span {
  display: grid !important;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0 0 1.4cqh !important;
  box-sizing: border-box;
  line-height: 1;
}
body.land::before {
  inset: 0 !important;
  filter: none !important;
  background: #7fbf55 var(--bgu) center / auto max(100vh, calc(var(--sw) / 1.777)) no-repeat !important;
}
body.land::after {
  display: none !important;
}
.map.col:has(.map-art.land)::before {
  inset: 0 !important;
  filter: none !important;
  background: #7fbf55 var(--wmu) center var(--mt, 0px) / auto var(--mh, 100%) no-repeat !important;
}
.map-art.land {
  background-image: none !important;
} /* ultrawide background only: no hard art border on top */
/* round buttons in the style of the sound and gear ones: pause and back */
.topbar .round.small {
  background: url(../assets/ui/btn-pausa-redondo.webp) center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
.topbar .round.small.yellow-btn {
  background-image: url(../assets/ui/btn-voltar-redondo.webp) !important;
}
.topbar .round.small > svg,
.topbar .round.small > img {
  display: none !important;
}
/* landscape match top: pills from the new art; the number does not sit under the coin */
body.land .topbar .pill {
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 0 calc(4.6 * var(--uh)) !important;
  box-shadow: none !important;
  border-image: url(../assets/ui/pilula-hud.webp) 0 90 fill / 0 calc(4.6 * var(--uh)) stretch !important;
  box-sizing: border-box;
}
body.land .topbar .pill b,
body.land .topbar .pill .lvw {
  color: #4a2a14 !important;
  -webkit-text-stroke: 0 !important;
}
body.land .topbar .pill .lvw {
  font-size: calc(4 * var(--uh)) !important;
  font-weight: 800;
}
body.land .topbar .coins b {
  padding-left: calc(3.2 * var(--su) / 100) !important;
  text-align: center;
}
body.land .topbar .coins i {
  left: calc(-2.4 * var(--su) / 100) !important;
}
/* round usage badges and helper labels on the small plaque */
.helper .badge {
  background: url(../assets/ui/selo-verde.webp) center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  height: auto !important;
  aspect-ratio: 1;
  display: grid !important;
  place-items: center;
  color: #fff !important;
  font-weight: 900;
  text-shadow: 0 0.15em 0 rgba(20, 80, 20, 0.6);
  -webkit-text-stroke: 0 !important;
  padding: 0 !important;
}
body.land .hwrap .hlabel {
  background: url(../assets/ui/plaquinha.webp) center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #5a3518 !important;
  font-weight: 800 !important;
  font-size: calc(3.2 * var(--uh)) !important;
  letter-spacing: 0.01em;
}
/* landscape match top on a grid: pause on the tray's left edge, level in the middle, coins on the right edge, same row */
body.land:not(.s-home) .topbar .round.small {
  position: fixed !important;
  left: var(--colx) !important;
  right: auto !important;
  top: 2.4vh !important;
  width: min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13)) !important;
  height: min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13)) !important;
  margin: 0 !important;
  transform: none !important;
}
body.land:not(.s-home) .topbar .pill.level {
  position: fixed !important;
  left: calc(var(--colx) + var(--colw) / 2) !important;
  right: auto !important;
  top: calc(2.4vh + 1.25 * var(--uh)) !important;
  width: min(calc(18 * var(--su) / 100), calc(var(--colw) * 0.3)) !important;
  height: calc(9 * var(--uh)) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
body.land:not(.s-home) .topbar .coins {
  position: fixed !important;
  left: calc(var(--colx) + var(--colw) - min(calc(18 * var(--su) / 100), calc(var(--colw) * 0.3))) !important;
  right: auto !important;
  top: calc(2.4vh + 1.25 * var(--uh)) !important;
  width: min(calc(18 * var(--su) / 100), calc(var(--colw) * 0.3)) !important;
  height: calc(9 * var(--uh)) !important;
  margin: 0 !important;
  transform: none !important;
}
body.land:not(.s-home) .topbar .pill b {
  font-size: calc(5.6 * var(--uh)) !important;
}
body.land:not(.s-home) .topbar .coins i {
  width: calc(9.4 * var(--uh)) !important;
  height: calc(9.4 * var(--uh)) !important;
  left: calc(-4.6 * var(--uh)) !important;
}
body.land:not(.s-home) .topbar .coins b {
  padding: 0 !important;
  margin-left: auto !important;
  flex: none !important;
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  text-align: right !important;
  font-size: calc(5 * var(--uh)) !important;
}
/* landscape match mole on the grass, not on top of the flowers */
body.land:not(.s-home) .mascot {
  left: calc(var(--sx) + 11 * var(--sw) / 100) !important;
  bottom: 13vh !important;
  height: min(calc(40 * var(--uh)), 340px) !important;
}
/* landscape menu in a centered column: logo on top, mole in the middle, Play at the bottom */
body.land.s-home .home .logo {
  left: 50% !important;
  top: 2.5vh !important;
  height: min(calc(40 * var(--uh)), 340px) !important;
  transform: translateX(-50%) !important;
  animation: none !important;
}
body.land.s-home .home-mascot {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(5vh + min(16vh, 124px) + 2vh) !important;
  height: min(calc(34 * var(--uh)), 300px) !important;
  width: auto !important;
  transform: translateX(-50%) !important;
}
body.land.s-home .home .btn.big {
  bottom: 5vh !important;
}
/* dimmer for the pause, settings and sound windows: full screen, with a light blur */
.modal-shade {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(30, 20, 0, 0.38);
  backdrop-filter: blur(1.4px);
  -webkit-backdrop-filter: blur(1.4px);
  pointer-events: auto;
}
body .pause-back,
body .settings-back,
body .sound-back {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* match top: gear (pause and language) + sound button (volumes), in the menu's round style */
.topbar .round.small.gear-btn {
  background-image: url(../assets/ui/btn-gear-inicio.webp) !important;
}
.topbar .snd-btn {
  background: url(../assets/ui/btn-som-inicio.webp) center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  cursor: pointer;
}
.topbar .snd-btn img {
  display: none !important;
}
body:not(.land) .topbar .snd-btn {
  position: fixed;
  left: calc(var(--px) + 18.4 * var(--pw) / 100);
  top: calc(var(--sat) + 1.7vh);
  width: calc(13 * var(--pu) / 100);
  height: calc(13 * var(--pu) / 100);
  margin: 0;
}
body.land:not(.s-home) .topbar .snd-btn {
  position: fixed !important;
  left: calc(var(--colx) + min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13)) + 1.2 * var(--uh)) !important;
  top: 2.4vh !important;
  width: min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13)) !important;
  height: min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13)) !important;
  margin: 0 !important;
}
/* pause: language and vibration row in place of the sound and music switches */
.modal.pause .switches .set-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1.5cqw;
  padding: 0 2.6cqw !important;
  box-sizing: border-box;
  font-size: 3.6cqw !important;
  font-weight: 800;
  color: #4a2a14;
}
.modal.pause .set-lang {
  font: inherit;
  font-size: 3.4cqw;
  max-width: 20cqw;
  border: 0.4cqw solid #c9a070;
  border-radius: 1.6cqw;
  background: #fff;
  color: #4a2a14;
  padding: 0.2cqh 1cqw;
}
/* tutorial: no yellow touch circle; smaller hand */
.toque {
  display: none !important;
}
body:not(.land) .hand {
  width: calc(15 * var(--pu) / 100) !important;
  height: auto !important;
}
body.land .hand {
  width: min(calc(9 * var(--su) / 100), 14vh) !important;
}
.map.col:not(:has(.map-art.land))::before {
  inset: 0 !important;
  filter: none !important;
  background: #7fbf55 var(--wmpu) center var(--mt, 0px) / auto var(--mh, 100%) no-repeat !important;
}
.map.col .map-art:not(.land) {
  background-image: none !important;
}
/* straight "Select level" ribbon: straight, centered text; compact map coins, with the coin inside */
.map-head .sign .arc text {
  font-size: 50px !important;
}
.map .topbar .coins b,
.topbar .coins b {
  white-space: nowrap;
}
body.land .map ~ .topbar .coins b {
  padding: 0 0 0 calc(4.5 * var(--uh)) !important;
  margin: 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
}
.map.col.tall:has(.map-art.land)::before {
  background: #7fbf55 var(--wma) center var(--my, 0px) / var(--mw, 100%) auto no-repeat !important;
}
/* pause: language and vibration in the places of the old sound and music switches */
body .modal.pause .switches .lang-row,
body .modal.pause .switches .vibe-row {
  position: absolute !important;
  top: 42.4cqh !important;
  height: 6.5cqh !important;
  font-size: 2.3cqh !important;
  background: #fffaf0;
  border: 0.45cqw solid #c9a070 !important;
  border-radius: 2.6cqw;
}
body .modal.pause .switches .lang-row {
  left: 4.5cqw !important;
  width: 40cqw !important;
}
body .modal.pause .switches .vibe-row {
  left: 46.5cqw !important;
  width: 35cqw !important;
}
body .modal.pause .switches .set-lang {
  font-size: 2.1cqh !important;
  max-width: 19cqw;
}
/* landscape menu on a large screen: everything sized by height (no pixel cap), in a column: logo, mole, Play */
body.land.s-home .home .logo {
  height: calc(44 * var(--uh)) !important;
  top: 2.5vh !important;
}
body.land.s-home .home .btn.big {
  width: calc(36 * var(--su) / 100) !important;
  height: calc(15 * var(--uh)) !important;
  margin: 0 0 0 calc(-18 * var(--su) / 100) !important;
  font-size: calc(7.4 * var(--uh)) !important;
  -webkit-text-stroke: calc(1 * var(--uh)) #5a3518 !important;
  bottom: 5vh !important;
}
body.land.s-home .home-mascot {
  height: calc(30 * var(--uh)) !important;
  bottom: calc(5vh + 15 * var(--uh) + 2vh) !important;
}
/* menu sound and settings: larger and always crisp (muted is only slightly lighter) */
body.land.s-home .home-row .small-btn {
  width: calc(14 * var(--uh)) !important;
  height: calc(14 * var(--uh)) !important;
  right: calc(var(--sx) + 3 * var(--sw) / 100 + 14 * var(--uh) + 1.8vh) !important;
}
body.land.s-home .home-row .home-gear {
  right: calc(var(--sx) + 3 * var(--sw) / 100) !important;
}
.small-btn.muted,
body.land.s-home .home-row .small-btn.muted {
  opacity: 0.85 !important;
  filter: saturate(0.6);
}
/* victory as its own screen: no tray, helpers or mole behind it; HUD stays on top */
body:has(.modal.win) .helpers,
body:has(.modal.win) .mascot,
body:has(.modal.win) .front-flowers {
  display: none !important;
}
body .win-back,
body .lose-back {
  background: transparent !important;
}
body .modal-back {
  pointer-events: none;
}
body .modal-back .modal {
  pointer-events: auto;
}
.topbar {
  z-index: 70 !important;
  position: relative;
} /* settings and sound never end up under a window or the dimmer */
/* smaller, lower title; moving stars and sparkles */
.modal.win .ribbon .arc text {
  font-size: 74px !important;
}
body .modal.win .ribbon .arc {
  top: 1cqh !important;
}
.modal.win .stars .spark {
  animation: twinkle 1.6s ease-in-out infinite;
  transform-origin: center;
}
.modal.win .stars .spark.r {
  animation-delay: 0.8s;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 1;
    scale: 1;
  }
  50% {
    opacity: 0.35;
    scale: 0.7;
  }
}
.modal.win img.star.on {
  animation:
    starIn 0.42s backwards ease-out,
    starBob 2.4s 1.6s ease-in-out infinite;
}
.modal.win img.star.on:nth-child(3) {
  animation-delay: 0.62s, 2s;
}
.modal.win img.star.on:nth-child(4) {
  animation-delay: 0.94s, 2.4s;
}
@keyframes starBob {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -4%;
    rotate: 4deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .modal.win .stars .spark,
  .modal.win img.star.on {
    animation: none !important;
  }
}
/* buttons: Levels becomes the round back-to-map button; Next is wide and centered */
body .modal.win .row .btn.lv-btn {
  left: 9cqw !important;
  top: 28.2cqh !important;
  width: 9.4cqh !important;
  height: 9.4cqh !important;
  padding: 0 !important;
  border: none !important;
  border-image: none !important;
  background: url(../assets/ui/btn-voltar-redondo.webp) center / contain no-repeat !important;
}
body .modal.win .row .btn:nth-child(2) {
  left: calc(11cqw + 9.4cqh) !important;
  width: calc(77cqw - 9.4cqh - 2cqw) !important;
  top: 28.4cqh !important;
  height: 8.6cqh !important;
  --ph: 8.6cqh;
  font-size: 4cqh !important;
  justify-content: center !important;
  gap: 0.5em;
}
body.land:not(.s-home) .topbar .pill.level {
  left: var(--colx) !important;
  transform: none !important;
}
body.land:not(.s-home) .topbar .coins {
  left: calc(var(--colx) + var(--colw) / 2) !important;
  transform: translateX(-50%) !important;
}
body.land:not(.s-home) .topbar .snd-btn {
  left: calc(var(--colx) + var(--colw) - 2 * min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13)) - 1.2 * var(--uh)) !important;
}
body.land:not(.s-home) .topbar .round.small.gear-btn {
  left: calc(var(--colx) + var(--colw) - min(calc(11.5 * var(--uh)), calc(var(--colw) * 0.13))) !important;
}
body:not(.land) .topbar .pill.level {
  position: fixed !important;
  left: calc(var(--px) + 3 * var(--pw) / 100) !important;
  right: auto !important;
  top: calc(var(--sat) + 2.2vh) !important;
  width: calc(22 * var(--pu) / 100) !important;
  height: 5vh !important;
  margin: 0 !important;
  transform: none !important;
}
body:not(.land) .topbar .coins {
  position: fixed !important;
  left: calc(var(--px) + 28 * var(--pw) / 100) !important;
  right: auto !important;
  top: calc(var(--sat) + 2.2vh) !important;
  width: calc(30 * var(--pu) / 100) !important;
  height: 5vh !important;
  margin: 0 !important;
}
body:not(.land) .topbar .coins b {
  margin-left: auto !important;
  padding: 0 calc(3 * var(--pu) / 100) 0 0 !important;
  width: auto !important;
  min-width: max-content !important;
  flex: none !important;
}
body:not(.land) .topbar .coins i {
  width: calc(9 * var(--pu) / 100) !important;
  height: calc(9 * var(--pu) / 100) !important;
  left: calc(-2 * var(--pu) / 100) !important;
}
body:not(.land) .topbar .snd-btn {
  left: calc(var(--px) + 63 * var(--pw) / 100) !important;
  top: calc(var(--sat) + 1.4vh) !important;
}
body:not(.land) .topbar .round.small.gear-btn {
  position: fixed !important;
  left: calc(var(--px) + 81 * var(--pw) / 100) !important;
  right: auto !important;
  top: calc(var(--sat) + 1.4vh) !important;
  width: calc(13 * var(--pu) / 100) !important;
  height: calc(13 * var(--pu) / 100) !important;
  margin: 0 !important;
}
.map.pe-tall {
  background: #7fbf55 var(--wmpa) center var(--my, 0px) / var(--mw, 100%) auto no-repeat;
}
.map.pe-tall .map-art {
  background-image: none !important;
}
body.land.s-home .home .logo {
  height: 42vh !important;
  top: 2.5vh !important;
}
body.land.s-home .home .btn.big {
  width: calc(15vh * 3.3) !important;
  height: 14vh !important;
  margin: 0 0 0 calc(-15vh * 3.3 / 2) !important;
  font-size: 7vh !important;
  -webkit-text-stroke: 0.9vh #5a3518 !important;
  bottom: 5vh !important;
}
body.land.s-home .home-mascot {
  height: 31vh !important;
  bottom: calc(5vh + 14vh + 2vh) !important;
}

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