/* Mahjong Treasure Quest 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 (many pirate theme rules are in 04-overrides.css). */

/* 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: none;
}
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: none 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: none center / 100% 100% no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
/* landscape gear: drawn button */
body.land.s-home .home-gear {
  background: none 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: none center / 100% 100% no-repeat !important;
  filter: none !important;
}
body .modal.lose .scene {
  background: none 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 octopus faces into the screen (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: none 0 104 fill / 0 calc(var(--ph) / 2) stretch !important;
}
body .modal .btn.ghost {
  border-image: none 0 101 fill / 0 calc(var(--ph) / 2) stretch !important;
}
body .modal .btn.yellow {
  border-image: none 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: none 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: none 110 fill / 6cqh stretch;
}
body .modal.win .ribbon {
  background: none !important;
  border: solid transparent;
  border-width: 0 12cqh;
  border-image: none 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: none 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: none 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: none center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
.switch.on b {
  background-image: none !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: none 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: none !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);
}

.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: none center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
body:not(.land).s-home .home-row .home-gear {
  background-image: none !important;
}
body:not(.land).s-home .home-row .small-btn img {
  display: none;
}
body .modal.lose .mini-tray {
  background: none 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: none !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: none 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: none;
  --bgu: none;
}
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 octopus (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: none 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: none !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: none !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 octopus: 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;
} /* octopus's legs in front of the decorations */
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: none center / contain no-repeat !important;
  border: none !important;
  box-shadow: none !important;
}
.topbar .round.small.yellow-btn {
  background-image: none !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: none 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 level: octopus on the ground, not on top of the decorations */
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, octopus 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: none !important;
}
.topbar .snd-btn {
  background: none 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, octopus, 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 octopus 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: none 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;
}
/* settings: language list in the game's style, inside the row; window closer to the center; title centered on the ribbon */
.set-lang {
  -webkit-appearance: none;
  appearance: none;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235a3518' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")
    right 0.6em center / 0.8em auto no-repeat !important;
  padding-right: 1.8em !important;
  max-width: 52%;
  min-width: 0;
  font-weight: 800 !important;
  cursor: pointer;
}
.modal.settings .set-lang {
  max-width: 46cqw;
}
.modal.settings {
  top: 28cqh !important;
}
.modal.settings .ribbon span {
  padding: 0 0 0.5cqh !important;
}
body:has(.modal.win) .topbar .pill,
body:has(.modal.lose) .topbar .pill,
body:has(.modal.pause) .topbar .pill {
  visibility: hidden !important;
}
body:has(.modal.lose) .helpers,
body:has(.modal.lose) .mascot,
body:has(.modal.lose) .front-flowers {
  display: none !important;
}
body .modal.lose .scene {
  -webkit-mask-image: radial-gradient(ellipse 52% 60% at 50% 46%, #000 70%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 52% 60% at 50% 46%, #000 70%, transparent 100%) !important;
}
body.land:not(.s-home) .topbar .coins {
  min-width: calc(17 * var(--uh)) !important;
}

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