/* Mahjong Garden styles, part 2 of 4: layout of the screens (home, map, game) and the first window styles. 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. */

.btn.big {
  width: min(92vw, 520px);
  aspect-ratio: 900 / 247;
  height: auto;
  padding: 0 0 1.5%;
  margin-top: 1vh;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  background: url(../assets/ui/btn-play.webp) center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 6px 0 rgba(46, 107, 31, 0.55));
  font-size: clamp(36px, 10vw, 58px);
  color: #fff;
  -webkit-text-stroke: 6px #2e6b1f;
  paint-order: stroke fill;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}
.btn.big .bi {
  width: 1em;
  height: 1em;
  fill: #ffd84a;
  filter: drop-shadow(0 3px 0 #2e6b1f);
  -webkit-text-stroke: 0;
}
body.land .btn.big {
  width: min(calc(44 * var(--su) / 100), 620px);
  font-size: clamp(40px, calc(8 * var(--uh)), 70px);
}

body.land .helper {
  width: clamp(100px, calc(20 * var(--uh)), 156px) !important;
  height: clamp(100px, calc(20 * var(--uh)), 156px) !important;
}
body.land .home-mascot {
  height: min(calc(62 * var(--uh)), 470px);
}
body.land .home > .rays:first-child {
  left: calc(var(--sx) + 1.5 * var(--sw) / 100);
  bottom: 3vh;
}
.sstars .star {
  width: clamp(16px, 4.6vw, 24px);
  height: clamp(16px, 4.6vw, 24px);
}

.plate {
  height: 58px;
  top: -6px;
  left: 15%;
}
body.land .plate {
  height: calc(14.5 * var(--uh));
  left: 7.5%;
  top: -2px;
}
.m-foot {
  width: 56%;
}
.modal.lose .ribbon.gold {
  filter: hue-rotate(-38deg) saturate(1.15);
}
.modal.lose .lose-head {
  font-weight: 800;
  font-size: 1.15em;
  margin-bottom: 0;
}
.modal.lose .lose-head + p {
  margin-top: 2px;
  font-size: 0.92em;
}
.modal.lose .row .btn {
  position: relative;
}
.modal.lose .row .btn .bbadge {
  position: absolute;
  top: -2.55cqw;
  right: -1.7cqw;
  margin: 0;
  min-width: 5.96cqw;
  height: 5.96cqw;
  font-size: 3.4cqw;
}
.modal.lose .mini-tray {
  gap: 2px;
  padding: 1.28cqw;
}
.modal.lose .mini-tray i {
  width: 14%;
}

body:not(.land) .pill.level.tut {
  display: none;
}
body:not(.land) .plate.show {
  left: 24%;
  height: 62px;
  top: -8px;
}
.home-mascot {
  height: min(36vh, 360px);
}

.modal .m-face.peek,
.modal.pause .m-face.peek,
.modal.lose .m-face.peek {
  display: block;
  height: clamp(23.4cqw, 30cqw, 31.91cqw);
  margin: calc(clamp(23.4cqw, 30cqw, 31.91cqw) * -0.86) auto -0.85cqw;
  z-index: 2;
}

.stop,
.stop.cur {
  width: auto;
}
.stop.cur b {
  font-size: inherit;
}
.map-mascot {
  transform: translate(-50%, -50%);
}
.map-sign {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.map-head {
  top: calc(var(--sat) + 3.5vh);
}
.logo-s {
  width: 52.5vw;
  max-width: 420px;
  max-height: none;
}
.map-head .sign {
  width: 46vw;
  max-width: 380px;
  height: 4.4vh;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 2.2vh;
  margin-top: -0.6vh;
}
body:not(.land) .topbar .coins {
  height: calc(9 * var(--pu) / 100);
  max-height: 52px;
}
body:not(.land) .topbar .pill.level {
  position: fixed;
  left: calc(var(--px) + 36 * var(--pw) / 100);
  top: calc(var(--sat) + 3.2vh);
  width: calc(19 * var(--pu) / 100);
  min-width: 0;
  max-width: none;
  height: calc(7.8 * var(--pu) / 100);
  max-height: 44px;
  margin: 0;
}

body.land .topbar .round.small {
  position: fixed;
  left: calc(var(--sx) + 2 * var(--sw) / 100);
  top: 2.5vh;
  width: calc(6 * var(--su) / 100) !important;
  height: calc(6 * var(--su) / 100) !important;
  margin: 0;
}
body.land .plate {
  position: fixed;
  left: calc(var(--sx) + 11 * var(--sw) / 100);
  top: 2vh;
  height: calc(17.5 * var(--uh));
  width: auto;
}
body.land .topbar .pill.level {
  min-width: 0;
  max-width: none;
  position: fixed;
  left: calc(var(--sx) + 37 * var(--sw) / 100);
  top: 3vh;
  width: calc(15.5 * var(--su) / 100);
  height: calc(9 * var(--uh));
  font-size: calc(5 * var(--uh));
  margin: 0;
  justify-content: center;
}
body.land .topbar .coins {
  position: fixed;
  left: calc(var(--sx) + 60 * var(--sw) / 100);
  top: 2.5vh;
  width: calc(18.5 * var(--su) / 100);
  height: calc(9.5 * var(--uh));
  font-size: calc(5 * var(--uh));
  margin: 0;
}
body.land .mascot {
  left: calc(var(--sx) + 1 * var(--sw) / 100) !important;
  top: 39vh !important;
  bottom: auto !important;
  width: calc(24 * var(--su) / 100);
  height: auto !important;
}
body.land .helpers {
  position: fixed;
  inset: 0;
  transform: none;
  display: block;
  pointer-events: none;
}
body.land .hwrap {
  position: fixed;
  display: block;
  width: calc(11 * var(--su) / 100);
  pointer-events: auto;
}
body.land .hwrap:nth-child(1) {
  left: calc(var(--sx) + 84.5 * var(--sw) / 100);
  top: 12.5vh;
}
body.land .hwrap:nth-child(2) {
  left: calc(var(--sx) + 84.5 * var(--sw) / 100);
  top: 37.5vh;
}
body.land .hwrap:nth-child(3) {
  left: calc(var(--sx) + 84 * var(--sw) / 100);
  top: 62.5vh;
  width: calc(11.5 * var(--su) / 100);
}
body.land .hwrap .helper {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1;
}
body.land .hwrap .hlabel {
  position: absolute;
  left: 0;
  top: 17vh;
  width: 100%;
  height: calc(5 * var(--uh));
  font-size: calc(3.6 * var(--uh));
  display: grid;
  place-items: center;
  padding: 0;
}
body.land .hwrap:nth-child(3) .hlabel {
  left: calc(-0.75 * var(--sw) / 100);
  width: calc(13 * var(--su) / 100);
  top: 17.5vh;
}
body.land .hwrap .helper .badge {
  top: 0;
  right: auto;
  left: 63.6%;
  width: calc(4.5 * var(--su) / 100);
  min-width: 0;
  height: calc(8 * var(--uh));
  font-size: calc(4.4 * var(--uh)) !important;
}

body.land.s-home {
  background-image: url(../assets/fundo-inicio-largo.webp);
}
.home-bar {
  display: none;
}
body.land.s-home .ray {
  display: none;
}
body.land.s-home .home .logo {
  content: url(../assets/ui/logo-deitado.webp);
  position: fixed;
  left: calc(var(--sx) + 29 * var(--sw) / 100);
  top: 2vh;
  width: calc(42 * var(--su) / 100);
  height: auto;
  max-height: none;
  margin: 0;
}
body.land.s-home .home .btn.big {
  position: fixed;
  left: calc(var(--sx) + 28 * var(--sw) / 100);
  top: 58vh;
  width: calc(43 * var(--su) / 100);
  margin: 0;
}
body.land.s-home .home-mascot {
  position: fixed !important;
  left: calc(var(--sx) + 2 * var(--sw) / 100);
  top: 34vh;
  bottom: auto;
  height: calc(46 * var(--uh)) !important;
  margin: 0;
}
body.land.s-home .home-row .small-btn:not(.home-gear) {
  display: none;
}
body.land.s-home .home-gear {
  position: fixed;
  left: calc(var(--sx) + 2 * var(--sw) / 100);
  top: 2.5vh;
  width: calc(6 * var(--su) / 100) !important;
  height: calc(6 * var(--su) / 100) !important;
}
body.land.s-home .home-coins {
  position: fixed;
  left: calc(var(--sx) + 79.5 * var(--sw) / 100);
  top: 2.5vh;
  right: auto;
  width: calc(18.5 * var(--su) / 100);
  height: calc(9.5 * var(--uh));
  font-size: calc(5 * var(--uh));
  margin: 0;
}
body.land.s-home .home-next .stop {
  position: fixed !important;
  transform: none !important;
  height: auto;
}
body.land.s-home .home-next .stop:nth-of-type(1) {
  left: calc(var(--sx) + 88 * var(--sw) / 100);
  top: 30.5vh;
  width: calc(6.5 * var(--su) / 100);
}
body.land.s-home .home-next .stop:nth-of-type(2) {
  left: calc(var(--sx) + 81 * var(--sw) / 100);
  top: 38.5vh;
  width: calc(7.5 * var(--su) / 100);
}
body.land.s-home .home-next .stop:nth-of-type(3) {
  left: calc(var(--sx) + 86.5 * var(--sw) / 100);
  top: 48.5vh;
  width: calc(8 * var(--su) / 100);
}
body.land.s-home .home-next .stop:nth-of-type(4) {
  left: calc(var(--sx) + 76 * var(--sw) / 100);
  top: 58vh;
  width: calc(11 * var(--su) / 100);
}
body.land.s-home .home-next .stop b {
  font-size: calc(4.4 * var(--uh));
}
body.land.s-home .home-next .stop.cur b {
  font-size: calc(6 * var(--uh));
}
body.land.s-home .home-bar {
  display: flex;
  position: fixed;
  left: calc(var(--sx) + 20.5 * var(--sw) / 100);
  top: 83vh;
  width: calc(59 * var(--su) / 100);
  height: calc(15 * var(--uh));
  justify-content: center;
  gap: calc(2.5 * var(--su) / 100);
}
.bar-btn {
  width: 12.6vw;
  height: 100%;
  border: none;
  padding: 0 0 0.6vh;
  background: url(../assets/ui/botao-creme.webp) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2vh;
  font-weight: 800;
  font-size: 3.6vh;
  color: var(--ink);
}
.bar-btn .bi,
.bar-btn img,
.bar-btn svg {
  width: 7vh;
  height: 7vh;
}
.bar-btn.off {
  filter: grayscale(0.7) brightness(0.92);
}

.logo-s {
  width: 50vw;
}
body:not(.land) .topbar .coins {
  width: calc(35 * var(--pu) / 100);
  max-width: 240px;
}
body:not(.land) .helper .badge {
  min-width: calc(7 * var(--pu) / 100);
  width: calc(7 * var(--pu) / 100);
  height: calc(7 * var(--pu) / 100);
  font-size: calc(4.4 * var(--pu) / 100) !important;
}
.front-flowers {
  display: none;
}
body.land .front-flowers {
  display: block;
  position: fixed;
  left: 0;
  top: 68vh;
  width: calc(22 * var(--su) / 100);
  height: calc(32 * var(--uh));
  object-fit: cover;
  object-position: top;
  pointer-events: none;
}
body.land.s-home .home-next .stop {
  background-size: 100% 100%;
  padding: 0;
}
body.land.s-home .home-next .stop:nth-of-type(1) {
  height: calc(8.5 * var(--uh));
}
body.land.s-home .home-next .stop:nth-of-type(2) {
  height: calc(10 * var(--uh));
}
body.land.s-home .home-next .stop:nth-of-type(3) {
  height: calc(10 * var(--uh));
}
body.land.s-home .home-next .stop:nth-of-type(4) {
  height: calc(14 * var(--uh));
}

.map-head .sign {
  background: url(../assets/ui/faixa.webp) center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
  color: var(--ink);
  font-weight: 800;
  -webkit-text-stroke: 0;
}

.fx-rays {
  position: fixed;
  pointer-events: none;
  z-index: 1;
  aspect-ratio: 30 / 24;
}
.fx-rays .spark {
  position: static;
  width: 100%;
  height: 100%;
}
body:not(.land) .fx-rays {
  left: calc(var(--px) + 54.5 * var(--pw) / 100);
  top: calc(var(--sat) + 9.5vh);
  width: calc(7 * var(--pu) / 100);
  height: 5.5vh;
  aspect-ratio: auto;
}
body.land .fx-rays {
  left: calc(var(--sx) + 53.5 * var(--sw) / 100);
  top: 9vh;
  width: calc(6 * var(--su) / 100);
  height: calc(9 * var(--uh));
  aspect-ratio: auto;
  transform: scaleX(-1);
}
.map-art .fx-rays {
  position: absolute;
  transform: translate(-50%, -50%) scaleX(-1);
}
.home-rays {
  display: none;
}
body.land.s-home .home-rays {
  display: block;
  left: calc(var(--sx) + 22 * var(--sw) / 100);
  top: 44vh;
  width: calc(6 * var(--su) / 100);
  height: calc(9 * var(--uh));
  aspect-ratio: auto;
  transform: scaleX(-1);
}
.helper .spark {
  left: 8%;
  top: 4%;
  width: 34%;
  height: 32%;
  z-index: 1;
}

.sstars .star {
  stroke-width: 3.4;
  stroke: #6b4529 !important;
}
body.land.s-home .home .btn.big .bi {
  display: none;
}
body.land.s-home .home .btn.big {
  font-size: calc(10 * var(--uh));
  -webkit-text-stroke: 8px #2e6b1f;
}
body.land.s-home .home-gear {
  background: linear-gradient(#ffe27a, #ffc531) !important;
}
body.land.s-home .home-gear img {
  width: 62%;
  height: 62%;
  object-fit: contain;
  filter: brightness(0.35) sepia(1) hue-rotate(-20deg);
}

body:not(.land) .map ~ .topbar .coins {
  position: fixed;
  left: calc(var(--px) + 65 * var(--pw) / 100);
  top: calc(var(--sat) + 2.5vh);
  width: calc(32 * var(--pu) / 100);
  margin: 0;
}

.modal .btn.go,
.modal .btn.ghost,
.modal .btn.yellow {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: center / 100% 100% no-repeat !important;
}
.modal .btn.go {
  background-image: url(../assets/ui/pilula-verde.webp) !important;
}
.modal .btn.ghost {
  background-image: url(../assets/ui/pilula-creme.webp) !important;
}
.modal .btn.yellow {
  background-image: url(../assets/ui/pilula-amarelo.webp) !important;
}
.modal .ribbon {
  background: center / 100% 100% no-repeat !important;
  filter: none !important;
  aspect-ratio: auto;
}
.modal.lose .ribbon {
  background-image: url(../assets/ui/faixa-coral.webp) !important;
}
.modal.win .ribbon {
  background-image: url(../assets/ui/faixa-ouro.webp) !important;
}
.modal.pause .ribbon {
  background-image: url(../assets/ui/faixa-pausa.webp) !important;
}
.modal.lose .ribbon span,
.modal.win .ribbon span {
  color: #fff;
  -webkit-text-stroke: 1.06cqw #7a3a1c;
  paint-order: stroke fill;
}
.modal.win .ribbon span {
  color: #5a3518;
  -webkit-text-stroke: 0;
}
.modal.pause .ribbon span {
  color: #5a3518;
  -webkit-text-stroke: 0;
}
body.land.s-home .home-gear img {
  filter: brightness(0.35) sepia(1) hue-rotate(-20deg) !important;
}

/* portrait windows: each tile in the inventory box (position relative to the panel = screen box - panel corner) */
body .lose-back,
body .win-back {
  background: transparent !important;
  backdrop-filter: none !important;
}
body:not(.land) .pause-back {
  background: rgba(58, 36, 22, 0.45) !important;
  backdrop-filter: blur(3px);
}
body .lose-back,
body .win-back,
body .pause-back {
  display: block !important;
  padding: 0 !important;
}
body .modal.lose,
body .modal.win,
body .modal.pause {
  position: fixed !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
}
body .modal.lose .m-body,
body .modal.win .m-body,
body .modal.pause .m-body,
body .modal .row,
body .modal .col,
body .modal .switches {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}
body .modal.lose > *,
body .modal.win > *,
body .modal.pause > * {
  margin: 0 !important;
}
body .modal .ribbon,
body .modal .m-face,
body .modal .m-foot,
body .modal.lose .m-body > *,
body .modal.win .m-body > *,
body .modal .row .btn,
body .modal.pause .col .btn,
body .modal .sep,
body .modal .switch {
  position: absolute !important;
  margin: 0 !important;
}
body .modal .ribbon {
  display: grid;
  place-items: center;
}
body .modal .row .btn,
body .modal.pause .col .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0 0 0.6cqh !important;
}
/* derrota [3,31,94,49] */
body .modal.lose {
  left: 3cqw;
  top: 31cqh;
  width: 94cqw;
  height: 49cqh;
}
body .modal.lose .ribbon {
  left: 6cqw;
  top: -4.5cqh;
  width: 82cqw;
  height: 9.5cqh;
}
body .modal.lose .ribbon span {
  font-size: 3.4cqh;
}
body .modal.lose .scene {
  left: 6cqw;
  top: 3.5cqh;
  width: 82cqw;
  height: 15.5cqh;
}
body .modal.lose .scene img {
  position: absolute;
  left: 24cqw;
  top: 0;
  width: 32cqw;
  height: 15.5cqh;
  object-fit: contain;
  object-position: bottom;
}
body .modal.lose .mini-tray {
  left: 4cqw;
  top: 18.5cqh;
  width: 86cqw;
  height: 11cqh;
  box-sizing: border-box;
  align-items: center;
}
body .modal.lose .mini-tray i {
  width: 11cqw;
  height: auto;
}
body .modal.lose .lose-head {
  left: 25cqw;
  top: 30.5cqh;
  width: 44cqw;
  font-size: 2.6cqh;
  line-height: 3cqh;
  text-align: center;
}
body .modal.lose .lose-head + p {
  left: 17cqw;
  top: 33.5cqh;
  width: 60cqw;
  font-size: 2cqh;
  line-height: 2.5cqh;
  text-align: center;
}
body .modal.lose .row .btn:nth-child(1) {
  left: 6cqw;
  top: 38cqh;
  width: 39cqw;
  height: 8cqh;
  font-size: 3.4cqh;
}
body .modal.lose .row .btn:nth-child(2) {
  left: 48cqw;
  top: 38cqh;
  width: 40cqw;
  height: 8cqh;
  font-size: 3cqh;
  line-height: 1;
}
body .modal.lose .row .btn .bbadge {
  position: absolute !important;
  left: 32cqw;
  top: -1.5cqh;
  right: auto;
  width: 7cqw;
  height: 4.5cqh;
  min-width: 0;
  font-size: 2.4cqh;
}
body .modal.lose .row .btn .bi {
  width: 4.6cqh;
  height: 4.6cqh;
}
/* victory [4.5,36,91,42] */
body .modal.win {
  left: 4.5cqw;
  top: 39.5cqh;
  width: 91cqw;
  height: 38.5cqh;
}
body .modal.win .m-face {
  left: 24.5cqw;
  top: -30.5cqh;
  width: 40cqw;
  height: 24cqh;
  object-fit: contain;
}
body .modal.win .ribbon {
  left: 3cqw;
  top: -5cqh;
  width: 85cqw;
  height: 9cqh;
}
body .modal.win .ribbon span {
  font-size: 3.4cqh;
}
body .modal.win .stars {
  left: 13.5cqw;
  top: 4cqh;
  width: 64cqw;
  height: 14cqh;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .modal.win .earn {
  left: 27.5cqw;
  top: 19cqh;
  width: 35cqw;
  height: 7cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4cqh;
}
body .modal.win .row .btn:nth-child(1) {
  left: 5cqw;
  top: 28.5cqh;
  width: 32cqw;
  height: 7.5cqh;
  font-size: 3cqh;
}
body .modal.win .row .btn:nth-child(2) {
  left: 39.5cqw;
  top: 28cqh;
  width: 46cqw;
  height: 8.5cqh;
  font-size: 3.4cqh;
}
body .modal.win::before,
body .modal.win::after {
  content: '';
  position: absolute;
  top: 18.5cqh;
  width: 20cqw;
  height: 9cqh;
  background: url(../assets/ui/flores-frente.webp) center / contain no-repeat;
  pointer-events: none;
}
body .modal.win::before {
  left: 1.5cqw;
}
body .modal.win::after {
  left: 69.5cqw;
  transform: scaleX(-1);
}
/* pausa [7,25,86,60] */
body .modal.pause {
  left: 7cqw;
  top: 28.1cqh;
  width: 86cqw;
  height: 56.9cqh;
}
body .modal.pause .m-face {
  left: 24cqw;
  top: -18.1cqh;
  width: 38cqw;
  height: 15cqh;
  object-fit: contain;
  object-position: bottom;
}
body .modal.pause .ribbon {
  left: 5cqw;
  top: -5.6cqh;
  width: 76cqw;
  height: 10.5cqh;
}
body .modal.pause .ribbon span {
  font-size: 3.2cqh;
}
body .modal.pause [data-a='go'] {
  left: 7.5cqw;
  top: 6.9cqh;
  width: 71cqw;
  height: 11cqh;
  font-size: 3.4cqh;
}
body .modal.pause [data-a='restart'] {
  left: 9cqw;
  top: 19.4cqh;
  width: 68cqw;
  height: 8.5cqh;
  font-size: 3cqh;
}
body .modal.pause [data-a='map'] {
  left: 9cqw;
  top: 29.4cqh;
  width: 68cqw;
  height: 8.5cqh;
  font-size: 3cqh;
}
body .modal.pause .sep {
  left: 11cqw;
  top: 38.9cqh;
  width: 64cqw;
  height: 2cqh;
}
body .modal.pause .switch[data-k='sound'] {
  left: 4.5cqw;
  top: 42.4cqh;
  width: 37cqw;
  height: 6.5cqh;
  font-size: 2cqh;
}
body .modal.pause .switch[data-k='music'] {
  left: 43.5cqw;
  top: 42.4cqh;
  width: 38cqw;
  height: 6.5cqh;
  font-size: 2cqh;
}
body .modal.pause .m-foot {
  left: 10cqw;
  top: 50.4cqh;
  width: 66cqw;
  height: 10cqh;
  object-fit: contain;
}

body.modal-open.m-lose .mascot {
  opacity: 1;
}
body .modal.lose .lose-head {
  left: 12cqw;
  width: 70cqw;
  white-space: nowrap;
}
body .modal.lose .lose-head + p {
  left: 7cqw;
  width: 80cqw;
  white-space: nowrap;
}

body .modal.lose .scene img {
  position: absolute !important;
  left: 24cqw !important;
  top: 0 !important;
  transform: none !important;
}
body .modal.lose .lose-head,
body .modal.lose .lose-head + p {
  left: 47cqw !important;
  width: auto !important;
  transform: translateX(-50%);
}
/* portrait start: inventory boxes */
body:not(.land).s-home .home-coins {
  position: fixed;
  left: calc(var(--px) + 60 * var(--pw) / 100);
  top: calc(var(--sat) + 2.8vh);
  width: calc(35 * var(--pu) / 100);
  height: calc(9.8 * var(--pu) / 100);
  right: auto;
  margin: 0;
}
body:not(.land).s-home .home-mascot {
  position: fixed !important;
  left: calc(var(--px) + 34 * var(--pw) / 100);
  top: calc(var(--sat) + 7vh);
  width: calc(45 * var(--pu) / 100);
  height: auto !important;
  margin: 0 !important;
  z-index: 0;
}
body:not(.land).s-home .home .logo {
  position: fixed;
  left: calc(var(--px) + 3 * var(--pw) / 100);
  top: calc(var(--sat) + 25vh);
  width: calc(92 * var(--pu) / 100);
  height: auto;
  max-height: none;
  margin: 0;
  z-index: 1;
}
body:not(.land).s-home .home .btn.big {
  position: fixed;
  left: calc(var(--px) + 8 * var(--pw) / 100);
  top: calc(var(--sat) + 70.5vh);
  width: calc(84 * var(--pu) / 100);
  margin: 0;
  z-index: 1;
}
body:not(.land).s-home .home-row .small-btn:not(.home-gear) {
  position: fixed;
  left: calc(var(--px) + 27.5 * var(--pw) / 100);
  top: calc(var(--sat) + 87vh);
  width: calc(17.5 * var(--pu) / 100) !important;
  height: calc(17.5 * var(--pu) / 100) !important;
}
body:not(.land).s-home .home-gear {
  position: fixed;
  left: calc(var(--px) + 53 * var(--pw) / 100);
  top: calc(var(--sat) + 87vh);
  width: calc(17.5 * var(--pu) / 100) !important;
  height: calc(17.5 * var(--pu) / 100) !important;
}
body:not(.land).s-home .ray {
  position: fixed;
  z-index: 2;
}
body:not(.land).s-home .ray.l {
  left: calc(var(--px) + 32 * var(--pw) / 100);
  top: calc(var(--sat) + 7vh);
  width: calc(8 * var(--pu) / 100);
  height: 6vh;
}
body:not(.land).s-home .ray.r {
  display: none;
}
body:not(.land).s-home .ray.l2 {
  left: calc(var(--px) + 10 * var(--pw) / 100);
  top: calc(var(--sat) + 52vh);
  width: calc(8 * var(--pu) / 100);
  height: 6vh;
}
body:not(.land).s-home .ray.r2 {
  left: calc(var(--px) + 82 * var(--pw) / 100);
  top: calc(var(--sat) + 52vh);
  width: calc(8 * var(--pu) / 100);
  height: 6vh;
}

body.land.s-home .home-mascot {
  height: calc(49 * var(--uh)) !important;
}
body:not(.land).s-home .home .btn.big {
  height: 14vh;
}
body.land .plate {
  height: auto;
  width: calc(18.8 * var(--su) / 100);
}
body:not(.land) .plate.show {
  left: 19%;
}
body:not(.land) .bubble {
  max-width: calc(44 * var(--pu) / 100);
}
body:not(.land) .hand {
  margin-left: calc(3 * var(--pu) / 100);
}

.fx-rays2 {
  display: none;
}
body.land .fx-rays2 {
  display: block;
  left: calc(var(--sx) + 20.8 * var(--sw) / 100);
  top: 44.6vh;
  width: calc(4.2 * var(--su) / 100);
  height: calc(9.8 * var(--uh));
  transform: none;
}
.helper .spark {
  left: 13%;
  top: 11%;
  width: 28%;
  height: 18%;
}
body:not(.land) .helper .badge {
  height: calc(6 * var(--pu) / 100);
}
body.land .hwrap .helper .badge {
  width: calc(4.1 * var(--su) / 100);
  height: calc(7.1 * var(--uh));
}
body:not(.land) .topbar .pill.level {
  height: 5vh;
  max-height: none;
}
body:not(.land) .topbar .coins {
  height: 5.7vh;
  max-height: none;
}
body:not(.land) .map ~ .topbar .coins {
  height: 4.4vh;
}
.stop .lock {
  width: 37%;
}

.spark {
  stroke: none !important;
}
body.land .hwrap .hlabel {
  color: #4a2a14 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  background: #fff3d6;
  border: 2.5px solid var(--line);
  border-radius: 12px;
  font-weight: 800;
}

body:not(.land) .helpers {
  bottom: calc(var(--sab) + 1.8vh) !important;
}
.helper img {
  width: 78%;
  height: 78%;
}

body:not(.land).s-home {
  background-image: url(../assets/fundo-inicio.webp);
}
body:not(.land) .bubble {
  left: calc(var(--px) + 15 * var(--pw) / 100) !important;
  right: auto !important;
  top: calc(var(--sat) + 11.5vh) !important;
  width: calc(46 * var(--pu) / 100);
  max-width: none !important;
  height: 14vh;
  box-sizing: border-box;
  padding: 0 calc(3 * var(--pu) / 100) 2.2vh !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: url(../assets/ui/balao.webp) center / 100% 100% no-repeat !important;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 2.6vh !important;
  line-height: 1.15;
  font-weight: 800;
  color: #4a2a14;
}
body:not(.land) .bubble::after {
  display: none;
}
/* helper buttons: drawn cream disc */
.helper {
  background: url(../assets/ui/btn-ajuda.webp) center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
/* landscape gear: drawn button */
body.land.s-home .home-gear {
  background: url(../assets/ui/btn-engrenagem.webp) center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
body.land.s-home .home-gear img {
  display: none;
}

body.modal-open.m-pause .mascot {
  opacity: 1;
}
body:not(.land) .pause-back {
  backdrop-filter: blur(3px) !important;
  background: rgba(30, 20, 0, 0.38) !important;
  z-index: 20;
}
body .modal.pause [data-a='go'] {
  font-size: 4.8cqh !important;
}
body .modal.pause [data-a='restart'],
body .modal.pause [data-a='map'] {
  font-size: 4.1cqh !important;
}
body .modal .row .btn .bi,
body .modal.pause .col .btn .bi {
  width: 5.4cqh !important;
  height: 5.4cqh !important;
}
body .modal.pause .switch {
  font-size: 2.6cqh !important;
}
body .modal.pause .switch .bi {
  width: 4.2cqh;
  height: 4.2cqh;
}
body .modal.win .row .btn:nth-child(1) {
  font-size: 3.4cqh !important;
}
body .modal.win .row .btn:nth-child(2) {
  font-size: 4.1cqh !important;
}
body .modal.lose .row .btn:nth-child(1) {
  font-size: 4cqh !important;
}
body .modal.lose .row .btn:nth-child(2) {
  font-size: 3.4cqh !important;
  line-height: 1 !important;
}
body .modal.lose .lose-head + p {
  font-weight: 800;
  color: #4a2a14;
}
body .modal.win .m-face {
  filter: drop-shadow(0 0 3cqh rgba(255, 236, 120, 0.95));
}
body .modal.win .stars::before {
  content: '';
  position: absolute;
  left: -2cqw;
  right: -2cqw;
  top: -4.5cqh;
  bottom: -1cqh;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(255, 228, 110, 0.85), rgba(255, 228, 110, 0) 70%);
}
.helper .badge,
.modal .bbadge {
  background: #2b8a2b !important;
  border: 2.5px solid #fff !important;
  color: #fff !important;
  font-weight: 900;
}

body .modal.pause {
  background: url(../assets/ui/painel-pausa.webp) center / 100% 100% no-repeat !important;
  filter: none !important;
}
body .modal.lose .scene {
  background: url(../assets/ui/cena-derrota.webp) center / 100% 100% no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  border-radius: 2cqh;
}

body:not(.land) .helper .badge {
  left: 65%;
  right: auto;
}
.helper .spark {
  width: 25%;
}
body.land .hwrap .hlabel {
  height: calc(5.6 * var(--uh));
}

body.land .hwrap .helper .spark {
  width: 30%;
  height: 19%;
}
body.land .hwrap {
  height: calc(22.6 * var(--uh));
}

/* the landscape mole faces into the screen (new art, not mirrored) */

body .modal.lose .scene {
  height: 13.8cqh;
}
body .modal.lose .ribbon {
  height: 10.8cqh;
  top: -5.3cqh;
}
body .modal.lose .lose-head {
  line-height: 2.7cqh;
}
/* tutorial (inventory boxes) */
body.tut:not(.land) .topbar .coins {
  position: fixed;
  left: calc(var(--px) + 63 * var(--pw) / 100);
  top: calc(var(--sat) + 3vh);
  width: calc(32 * var(--pu) / 100);
  height: 5vh;
  margin: 0;
}
body.tut:not(.land) .plate.show {
  height: auto;
  width: calc(37 * var(--pu) / 100);
}
body.tut:not(.land) .fx-rays {
  left: calc(var(--px) + 59 * var(--pw) / 100);
}

.sep-flor {
  width: 5.5cqw;
  height: auto;
  display: block;
}
.sep {
  display: flex;
  align-items: center;
  gap: 2cqw;
}
.sep span {
  flex: 1;
  height: 0.5cqh;
  background: #c9a27a;
  border-radius: 1cqh;
}

body.land.s-home .home-bar {
  display: block;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
body.land.s-home .bar-btn {
  position: fixed;
  top: 83vh;
  height: calc(13.3 * var(--uh));
  width: calc(12.6 * var(--su) / 100);
}
body.land.s-home .bar-btn:nth-child(1) {
  left: calc(var(--sx) + 20.6 * var(--sw) / 100);
}
body.land.s-home .bar-btn:nth-child(2) {
  left: calc(var(--sx) + 34.8 * var(--sw) / 100);
}
body.land.s-home .bar-btn:nth-child(3) {
  left: calc(var(--sx) + 49.6 * var(--sw) / 100);
  width: calc(14.7 * var(--su) / 100);
}
body.land.s-home .home-rays {
  top: 40vh;
  height: calc(11 * var(--uh));
}
body:not(.land).s-home .ray.l {
  width: calc(12 * var(--pu) / 100);
  height: 7vh;
}
body:not(.land).s-home .ray.l2,
body:not(.land).s-home .ray.r2 {
  width: calc(9 * var(--pu) / 100);
}
body:not(.land).s-home .home-coins {
  height: 5vh;
}
body .modal.pause .m-face {
  left: 27cqw;
  width: 34cqw;
}
body .modal.win .earn {
  height: 6.3cqh;
}
body .modal.lose .row .btn .bbadge {
  height: 3.9cqh !important;
}
body .modal.lose .scene img {
  width: 28.7cqw !important;
  left: 25.65cqw !important;
}

/* 9-slice (border-image): corners and tips of the art stay intact, only the middle stretches. No distorted art. */
body .modal .btn.go,
body .modal .btn.ghost,
body .modal .btn.yellow {
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-width: 0 calc(var(--ph) / 2) !important;
  border-image-width: 0 calc(var(--ph) / 2);
  box-sizing: border-box;
}
body .modal .btn.go {
  border-image: url(../assets/ui/pilula-verde.webp) 0 104 fill / 0 calc(var(--ph) / 2) stretch !important;
}
body .modal .btn.ghost {
  border-image: url(../assets/ui/pilula-creme.webp) 0 101 fill / 0 calc(var(--ph) / 2) stretch !important;
}
body .modal .btn.yellow {
  border-image: url(../assets/ui/pilula-amarelo.webp) 0 103 fill / 0 calc(var(--ph) / 2) stretch !important;
}
body .modal.pause [data-a='go'] {
  --ph: 11cqh;
}
body .modal.pause [data-a='restart'],
body .modal.pause [data-a='map'] {
  --ph: 8.5cqh;
}
body .modal.win .row .btn:nth-child(1) {
  --ph: 7.5cqh;
}
body .modal.win .row .btn:nth-child(2) {
  --ph: 8.5cqh;
}
body .modal.lose .row .btn {
  --ph: 8cqh;
}
body .modal.win,
body .modal.lose,
body .modal.pause {
  background: none !important;
  isolation: isolate;
}
body .modal.win::before,
body .modal.lose::before,
body .modal.pause::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border: 6cqh solid transparent;
  border-image: url(../assets/ui/panel.webp) 120 fill / 6cqh stretch;
  box-sizing: border-box;
  background: none;
  transform: none;
  width: auto;
  height: auto;
  left: 0;
  top: 0;
}
body .modal.win::after {
  content: none !important;
}
body .modal.pause::before {
  border-image: url(../assets/ui/painel-pausa.webp) 110 fill / 6cqh stretch;
}
body .modal.win .ribbon {
  background: none !important;
  border: solid transparent;
  border-width: 0 12cqh;
  border-image: url(../assets/ui/faixa-ouro.webp) 0 250 fill / 0 12cqh stretch !important;
  box-sizing: border-box;
}
body .modal.lose .scene {
  background-size: cover !important;
}
body.land.s-home .bar-btn {
  background: none !important;
  border: solid transparent;
  border-width: 5vh;
  border-image: url(../assets/ui/botao-creme.webp) 90 fill / 5vh stretch !important;
  box-sizing: border-box;
  padding: 0;
}
body:not(.land) .bubble {
  background: none !important;
  border: solid transparent !important;
  border-width: 4vh 3.4vh 4vh 3.4vh !important;
  border-image: url(../assets/ui/balao.webp) 120 100 120 120 fill / 4vh 3.4vh 4vh 4vh stretch !important;
  padding: 0 !important;
  font-size: 2.4vh !important;
}
body.land.s-home .home-next .stop {
  background-size: contain !important;
  background-position: center !important;
  height: auto !important;
  aspect-ratio: 1.3;
}

body .modal.lose .row .btn .bbadge {
  left: calc(32cqw - 4cqh) !important;
}
body .modal.win .w-confete {
  position: absolute;
  left: -4.5cqw;
  top: -31.5cqh;
  width: 100cqw;
  height: 29cqh;
  object-fit: contain;
  z-index: -2;
  pointer-events: none;
}
body .modal.win .w-faiscas {
  position: absolute;
  left: 5.5cqw;
  top: 2.5cqh;
  width: 80cqw;
  height: 16cqh;
  object-fit: contain;
  pointer-events: none;
}
body .modal.win .w-flor {
  position: absolute;
  top: 18.5cqh;
  width: 20cqw;
  height: 9cqh;
  object-fit: contain;
  pointer-events: none;
}
body .modal.win .w-flor.l {
  left: 1.5cqw;
}
body .modal.win .w-flor.r {
  left: 69.5cqw;
  transform: scaleX(-1);
}
body .modal.win .stars .spark {
  display: none;
}
body .modal.lose .l-folha {
  position: absolute;
  top: 31.5cqh;
  width: 6.4cqw;
  height: 3cqh;
  object-fit: contain;
}
body .modal.lose .l-folha.l {
  left: 10.3cqw;
}
body .modal.lose .l-folha.r {
  left: 77.8cqw;
  transform: scaleX(-1);
}
.switch b {
  background: url(../assets/ui/switch-off.webp) center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
.switch.on b {
  background-image: url(../assets/ui/switch-on.webp) !important;
}
.switch b::after,
.switch b::before {
  display: none !important;
}

.map-art .stop {
  filter: drop-shadow(0 3px 2px rgba(107, 69, 41, 0.35)) !important;
}
.map-art .stop b {
  color: #56270c !important;
  -webkit-text-stroke: 0 !important;
  font-weight: 900;
}
.map-art .stop.cur b {
  color: #56270c !important;
  -webkit-text-stroke: 0 !important;
}
.sstars .star {
  filter: saturate(1.5) brightness(0.88) drop-shadow(0 0 0.6px #6b4529) drop-shadow(0 0 0.6px #6b4529);
}
.topbar .pill.level b {
  color: #56270c !important;
  -webkit-text-stroke: 0 !important;
}
.helper .badge,
.modal .bbadge {
  background: #5fb03e !important;
  border-width: 3px !important;
}
body.tut:not(.land) .helpers .helper {
  transform: scale(0.94);
}
body:not(.land).s-home .home-mascot {
  width: calc(41 * var(--pu) / 100) !important;
  left: calc(var(--px) + 36 * var(--pw) / 100) !important;
}

body .modal.lose .scene {
  -webkit-mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse at center, #000 62%, transparent 100%) !important;
  border-radius: 0 !important;
}
body .modal.lose .mini-tray i.pair {
  box-shadow: 0 0 1.2cqh 0.5cqh rgba(255, 210, 58, 0.95) !important;
  background-color: #fff1b8 !important;
  border-color: #e0a91c !important;
}
.topbar .round.small svg {
  fill: #6b4529 !important;
}
.topbar .round.small img {
  filter: brightness(0.35) sepia(1) hue-rotate(-20deg) !important;
}

body:not(.land) .map ~ .topbar .round.small {
  background: url(../assets/ui/btn-voltar.webp) center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
body:not(.land) .map ~ .topbar .round.small > * {
  display: none !important;
}
body:not(.land).s-home .home .btn.big {
  background-image: url(../assets/ui/btn-play-retrato.webp) !important;
}
.toque {
  position: absolute;
  width: 10.6vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

body:not(.land).s-home .home .btn.big {
  height: auto !important;
  aspect-ratio: 900 / 249;
}
body:not(.land) .hand {
  height: auto !important;
  width: calc(22 * var(--pu) / 100) !important;
}
body.tut:not(.land) .helper .badge {
  height: calc(7 * var(--pu) / 100) !important;
}

.ray {
  background-image: url(../assets/ui/icon-02-1.svg) !important;
  background-size: contain !important;
}
.topbar button.round.small svg rect {
  fill: #6b4529 !important;
}

body .modal .w-raio,
body .modal .l-raio,
body .modal .m-raio {
  position: absolute;
  pointer-events: none;
}
body .modal .w-raio .spark,
body .modal .l-raio .spark,
body .modal .m-raio .spark {
  position: static;
  width: 100%;
  height: 100%;
}
body .modal.win .w-raio {
  top: 19.4cqh;
  width: 5.8cqw;
  height: 4.5cqh;
}
body .modal.win .w-raio.l {
  left: 22.1cqw;
}
body .modal.win .w-raio.r {
  left: 63.5cqw;
  transform: scaleX(-1);
}
body .modal.lose .l-raio {
  left: 56cqw;
  top: 3.4cqh;
  width: 8.5cqw;
  height: 4.8cqh;
  transform: scaleX(-1);
}
body .modal.pause .m-raio {
  left: 23.8cqw;
  top: -17.9cqh;
  width: 9.6cqw;
  height: 5.7cqh;
  z-index: 3;
}

.stop .faisca {
  position: absolute;
  width: 22%;
  left: 6%;
  top: -22%;
  pointer-events: none;
}
.stop .faisca.f2 {
  width: 16%;
  left: 72%;
  top: -12%;
}
.stop .faisca.f3 {
  width: 13%;
  left: 44%;
  top: -30%;
}
.stop.cur {
  filter: drop-shadow(0 0 1.6vh rgba(255, 220, 80, 0.95)) drop-shadow(0 0 0.6vh rgba(255, 240, 150, 0.9)) !important;
}
.mini-tray i {
  position: relative;
}
.mini-tray i .faisca {
  position: absolute;
  width: 45%;
  left: 55%;
  top: -40%;
  pointer-events: none;
}

body .modal.win .row .btn:nth-child(2) .bi {
  filter: brightness(0) invert(1) drop-shadow(0 0.3cqh 0 rgba(46, 107, 31, 0.6)) !important;
}
body .modal.lose .row .btn:nth-child(2) {
  font-size: 2.7cqh !important;
}
body .modal.lose .row .btn:nth-child(1) {
  font-size: 3.2cqh !important;
}
body .modal.lose .row .btn .bi {
  width: 4.4cqh !important;
  height: 4.4cqh !important;
}
body.modal-open .helpers,
body.modal-open .helper .badge {
  opacity: 1 !important;
  filter: none !important;
}

.sstars .star:not(.on) {
  filter: grayscale(1) brightness(1.35) opacity(0.75) !important;
}
.coins {
  overflow: visible !important;
}
.coins .spark {
  width: 5.3vw !important;
  height: 3.6vh !important;
  left: -4vw !important;
  top: -1.6vh !important;
}
body .modal.pause .m-foot {
  left: 10.5cqw;
  top: 49.4cqh;
  width: 65.4cqw;
  height: 10.7cqh;
  object-fit: contain;
}
.home-flores {
  display: none;
}
body.land.s-home .home-flores {
  display: block;
  position: fixed;
  left: 0;
  top: 62vh;
  width: calc(15 * var(--su) / 100);
  height: calc(18 * var(--uh));
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

.btn.big::before,
.btn.big::after {
  display: none !important;
}
body:not(.land).s-home .home .btn.big {
  font-size: 6.2vh !important;
  -webkit-text-stroke: 1.1vh #5a3518 !important;
  color: #fff8e6 !important;
}
body.land.s-home .home .btn.big {
  -webkit-text-stroke: 1.4vh #5a3518 !important;
  color: #fff8e6 !important;
}
body:not(.land).s-home .home .btn.big .bi {
  width: 6vh !important;
  height: 6vh !important;
  filter: drop-shadow(0 0 0.25vh #5a3518) drop-shadow(0 0 0.25vh #5a3518);
}

/* End of css/02-layout.css */