/* Hide & Peek styles, part 2 of 3 (continues game.css). */

.lmsg span {
  background: linear-gradient(#fffaf0, #f6e6c6);
  border: 0.5cqh solid var(--ink);
  border-radius: 99px;
  padding: 0.6cqh 2.4cqh;
  font-size: 4.6cqh;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.lline {
  border-top: 0.45cqh solid var(--ink);
}
.lparade i {
  flex: 0 1 12%;
}
.lparade i canvas {
  margin-bottom: -3.4cqh;
}
.lsec {
  border-width: 0 5.5cqh;
  font-size: 5.6cqh;
  gap: 1.6cqh;
  padding-bottom: 0.6cqh;
}
.win.lay .lsec > img.ic {
  height: 6cqh;
}
.lnext {
  border-width: 0 7cqh;
  font-size: 7cqh;
  gap: 1.6cqh;
  color: #fff;
  -webkit-text-stroke: 1cqh var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.5cqh 0 var(--ink);
  padding-bottom: 0.8cqh;
}
.win.lay .lnext > img.ic {
  height: 6.6cqh;
  filter: brightness(0) invert(1) drop-shadow(0.35cqh 0 0 #3a2416) drop-shadow(-0.35cqh 0 0 #3a2416)
    drop-shadow(0 0.35cqh 0 #3a2416) drop-shadow(0 -0.35cqh 0 #3a2416);
}
.lv2 .wspark i {
  width: 1.4cqh;
  height: 4.4cqh;
}

/* ===== Placar e bandeja em pé pelo inventário (m04 para 1 fileira, m09 para 2) ===== */
body:not(.land) #top {
  left: 0;
  right: 0;
  top: 0;
  height: calc(11 * var(--fh));
  padding: 0 !important;
  display: block !important;
}
body:not(.land) #top > * {
  position: absolute;
  margin: 0;
}
body:not(.land) .round {
  background: url(../assets/ui/botao-redondo.webp) center/contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  display: grid;
  place-items: center;
}
body:not(.land) #pause {
  left: calc(var(--sal) + 2.2 * var(--f));
  top: calc(var(--sat) + calc(3 * var(--fh)));
  width: calc(5.5 * var(--fh)) !important;
  height: calc(5.5 * var(--fh)) !important;
  max-width: none !important;
  max-height: none !important;
}
body:not(.land) #pause .ic {
  height: calc(2.7 * var(--fh));
  width: auto;
}
body:not(.land) .pill {
  border-style: solid !important;
  border-color: transparent !important;
  background: none !important;
  box-shadow: none !important;
  border-image: url(../assets/ui/pilula-creme.webp) 0 74 fill / 0 calc(2.4 * var(--fh)) !important;
  border-width: 0 calc(2.4 * var(--fh)) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  height: calc(4.9 * var(--fh));
  font-size: calc(2.3 * var(--fh)) !important;
  font-weight: 700;
}
body:not(.land) .lvl {
  left: calc(var(--sal) + 13.6 * var(--f));
  top: calc(var(--sat) + calc(3.5 * var(--fh)));
  width: calc(33.7 * var(--f));
  justify-content: space-between;
  gap: calc(1 * var(--f));
}
body:not(.land) .lvl .stars i {
  font-size: calc(2.4 * var(--fh)) !important;
}
body:not(.land) .lvl .stars i + i {
  margin-left: calc(-0.5 * var(--fh));
}
body:not(.land) .prog {
  left: calc(50vw + (49 - 50) * var(--f));
  top: calc(var(--sat) + calc(3.5 * var(--fh)));
  width: calc(30.6 * var(--f));
  justify-content: space-between;
  gap: calc(1.4 * var(--f));
}
body:not(.land) .prog .bar {
  display: block !important;
  flex: 1;
  width: auto !important;
  height: calc(1.6 * var(--fh)) !important;
  border-width: calc(0.3 * var(--fh)) !important;
}
body:not(.land) .prog .bar i {
  min-width: 10%;
}
body:not(.land) #hint {
  left: calc(100vw - var(--sar) - (100 - 81.1) * var(--f));
  top: calc(var(--sat) + calc(2.3 * var(--fh)));
  width: calc(6.3 * var(--fh)) !important;
  height: calc(6.3 * var(--fh)) !important;
  max-width: none !important;
  max-height: none !important;
}
body:not(.land) #hint .lupa {
  width: 64%;
  height: auto;
}
body:not(.land) #hint #hintN {
  top: calc(-0.9 * var(--fh));
  right: calc(-1.1 * var(--fh));
  min-width: calc(3.2 * var(--fh));
  height: calc(3.2 * var(--fh));
  font-size: calc(1.9 * var(--fh));
}
body:not(.land) #hint small {
  bottom: auto;
  top: calc(100% + calc(0.1 * var(--fh)));
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(1.8 * var(--fh));
  padding: 0 calc(1.4 * var(--fh));
  border-image: url(../assets/ui/pilula-creme.webp) 0 74 fill / 0 calc(1.4 * var(--fh));
  border-style: solid;
  border-width: 0 calc(1.4 * var(--fh));
  border-color: transparent;
  background: none;
}
body:not(.land) .hsp {
  left: calc(100vw - var(--sar) - (100 - 77.2) * var(--f));
  top: calc(var(--sat) + calc(0.3 * var(--fh)));
  width: calc(6.6 * var(--f));
  height: calc(3.3 * var(--fh));
}
.hsp i {
  position: absolute;
  width: calc(0.8 * var(--fh));
  height: calc(2.2 * var(--fh));
  border-radius: calc(1 * var(--fh));
  background: #ffd43b;
  border: calc(0.25 * var(--fh)) solid var(--ink);
}
.hsp i:nth-child(1) {
  left: 20%;
  top: 40%;
  transform: rotate(-60deg);
}
.hsp i:nth-child(2) {
  left: 45%;
  top: 0;
  transform: rotate(-30deg);
}
.hsp i:nth-child(3) {
  left: 75%;
  top: -10%;
  transform: rotate(0deg);
}
body.land .hsp {
  display: none;
}
body:not(.land) #zbtns {
  left: calc(100vw - var(--sar) - (100 - 88.9) * var(--f));
  right: auto;
  top: calc(12.7 * var(--fh)) !important;
  bottom: auto !important;
  gap: calc(0.8 * var(--fh));
}
body:not(.land) #zbtns .round {
  width: max(40px, calc(4.4 * var(--fh))) !important;
  height: max(40px, calc(4.4 * var(--fh))) !important;
  max-width: none !important;
  max-height: none !important;
  font-size: calc(3 * var(--fh));
  font-weight: 700;
  color: var(--ink);
}
body:not(.land) #zbtns .round {
  background: center / 100% 100% no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 50%;
  font-size: 0 !important;
  color: transparent;
  padding: 0;
}
body:not(.land) #zbtns #zin.round {
  background-image: url(../assets/ui/ic-zoom-in.webp) !important;
}
body:not(.land) #zbtns #zout.round {
  background-image: url(../assets/ui/ic-zoom-out.webp) !important;
}
/* bandeja: 1 fileira (até 4) = m04; 2 fileiras = m09 */
body:not(.land) #tray {
  left: calc(100vw - (100 - 34.5) * var(--f)) !important;
  right: auto !important;
  width: calc(64.6 * var(--f));
  max-width: none;
  top: calc(var(--vh, 100vh) - var(--sab) - (100 - 87.1) * var(--fh));
  bottom: auto !important;
  height: calc(12.3 * var(--fh)) !important;
  padding: 0 !important;
  margin: 0;
  overflow: visible;
}
body:not(.land) #tray #fox {
  position: absolute;
  left: calc(-32.5 * var(--f)) !important;
  top: calc(-3.1 * var(--fh));
  bottom: auto !important;
  width: calc(32.7 * var(--f)) !important;
  height: auto;
}
body:not(.land) #tray #slots {
  position: absolute;
  left: calc(3.4 * var(--f));
  right: calc(3 * var(--f));
  top: calc(2.4 * var(--fh));
  height: calc(7.7 * var(--fh));
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: calc(1 * var(--f));
}
body:not(.land) #tray.two {
  left: 0 !important;
  width: 100vw;
  top: calc(var(--vh, 100vh) - var(--sab) - (100 - 81.9) * var(--fh));
  height: calc(16.3 * var(--fh)) !important;
  border-radius: calc(4 * var(--fh)) calc(4 * var(--fh)) 0 0;
}
body:not(.land) #tray.two #fox {
  left: calc(2.3 * var(--f)) !important;
  top: calc(1.5 * var(--fh));
  width: calc(35.2 * var(--f)) !important;
}
body:not(.land) #tray.two::after {
  content: '';
  position: absolute;
  left: calc(36.6 * var(--f));
  top: calc(2 * var(--fh));
  bottom: calc(2 * var(--fh));
  border-left: calc(0.4 * var(--fh)) solid rgba(58, 36, 22, 0.35);
}
body:not(.land) #tray.two #slots {
  left: calc(37.6 * var(--f));
  right: calc(2.5 * var(--f));
  top: calc(3.9 * var(--fh));
  height: calc(11.6 * var(--fh));
  gap: calc(0.7 * var(--fh)) calc(1.5 * var(--f));
}
body:not(.land) #tray .slot {
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: url(../assets/ui/quadrinho.webp) 64 fill / calc(1.6 * var(--fh)) !important;
  box-shadow: none !important;
  border-radius: 0;
}
body:not(.land) #tray .slot {
  min-height: 0 !important;
  min-width: 0 !important;
  height: 100%;
  overflow: visible;
}
body:not(.land) #tray .slot canvas {
  width: auto !important;
  height: calc(6.2 * var(--fh)) !important;
  max-width: none;
  aspect-ratio: 1;
  object-fit: contain;
}
body:not(.land) #tray.two .slot canvas {
  height: calc(4.6 * var(--fh)) !important;
}
body:not(.land) .slot.got::after,
body:not(.land) .slot .chk {
  background: url(../assets/ui/check.webp) center/contain no-repeat !important;
  border: 0 !important;
  color: transparent !important;
  width: calc(3 * var(--fh)) !important;
  height: calc(3 * var(--fh)) !important;
  top: calc(-1 * var(--fh)) !important;
  right: calc(-1 * var(--fh)) !important;
}
/* balão da raposa (m04: x 21.2 y 77, 44% x 11.3%) com a arte do Codex */
body:not(.land) #say {
  left: calc(-13.3 * var(--f)) !important;
  top: calc(-10.1 * var(--fh));
  bottom: auto !important;
  width: calc(44 * var(--f));
  max-width: none !important;
  min-height: calc(11.3 * var(--fh));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(1 * var(--fh)) calc(4 * var(--f)) calc(2.6 * var(--fh)) calc(5 * var(--f)) !important;
  background: none !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: url(../assets/ui/balao.webp) 90 110 130 160 fill / calc(2.2 * var(--fh)) calc(2.6 * var(--fh))
    calc(3.2 * var(--fh)) calc(4 * var(--fh)) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-size: calc(2.6 * var(--fh)) !important;
  line-height: 1.12;
  text-align: center;
  font-weight: 700;
}
body:not(.land) #tray.two #say {
  left: calc(21.2 * var(--f)) !important;
  top: calc(-14 * var(--fh));
}
#tapring {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(11 * var(--f));
  height: calc(11 * var(--f));
  border-radius: 50%;
  border: calc(0.6 * var(--fh)) solid #ffd43b;
  box-shadow:
    0 0 0 calc(0.35 * var(--fh)) var(--ink),
    inset 0 0 0 calc(0.35 * var(--fh)) var(--ink);
  pointer-events: none;
  z-index: 2;
}
body:not(.land) #hand {
  width: calc(14.1 * var(--f)) !important;
}

body:not(.land) #tray.two .tcount {
  display: flex !important;
  position: absolute;
  left: calc(100% - 37.8 * var(--f));
  top: calc(0.6 * var(--fh));
  right: auto;
  transform: translateX(-50%);
  width: calc(17.4 * var(--f));
  height: calc(2.9 * var(--fh));
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: calc(2 * var(--fh));
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: calc(0.45 * var(--fh)) var(--ink);
  paint-order: stroke fill;
  background: linear-gradient(#a3e96b, #4cbf3a);
  border: calc(0.35 * var(--fh)) solid var(--ink);
  border-radius: 99px;
  z-index: 2;
}
body:not(.land) #tray:not(.two) .tcount {
  display: none !important;
}

/* ===== Abertura em pé (m01-abertura.json) ===== */
.title.lay {
  background: none;
}
.title.lay > * {
  position: absolute;
  margin: 0;
}
.title.lay .pc {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title.lay .pc > img {
  width: 100%;
  height: auto;
  display: block;
}
.title.lay .tbtn {
  height: auto;
  aspect-ratio: 1;
  width: 6.4cqh !important;
  max-width: none !important;
  max-height: none !important;
  top: calc(var(--sat) + 1.1cqh) !important;
}
.title.lay .tsnd {
  left: auto !important;
  right: 2.3cqw;
}
.title.lay .pc.tbtn > img.ic,
.title.lay .tbtn img.ic {
  width: 54% !important;
  height: auto !important;
}
.title.lay .tlogo {
  animation: popin 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.title.lay .tsub {
  border-image: url(../assets/ui/faixa-sub.webp) 0 110 fill / 0 calc(5.5cqh * 110 / 177);
  border-style: solid;
  border-width: 0 calc(5.5cqh * 110 / 177);
  border-color: transparent;
  font-size: 2.35cqh;
  font-weight: 700;
  color: var(--ink);
  gap: 1.2cqh;
  white-space: nowrap;
}
.title.lay .tsub .lf {
  width: 2.6cqh;
  height: 2.6cqh;
  background: radial-gradient(ellipse at 30% 70%, #8fd16a 0 45%, transparent 46%);
  border: 0;
  position: relative;
}
.title.lay .tsub .lf::before {
  content: '\1F343';
  font-size: 2.4cqh;
}
.title.lay .tsub .lf {
  background: none;
}
.title.lay .tplay {
  border-width: 0 5.3cqh;
  font-size: 6.1cqh;
  color: #fff;
  -webkit-text-stroke: 0.85cqh var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.5cqh 0 var(--ink);
  padding-bottom: 0.7cqh;
  animation: bob2 1.6s ease-in-out infinite;
}
.title.lay .tfox2 {
  transform-origin: 50% 100%;
  animation: wave 2.2s ease-in-out infinite;
}

/* ===== Mapa em pé (m02-mapa.json) ===== */
.map.lay {
  display: block;
  background: none;
}
.map.lay .pc {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.map.lay .pc > img {
  width: 100%;
  height: auto;
  display: block;
}
.map.lay .mhome {
  width: 6.3cqh !important;
  height: 6.3cqh !important;
  max-width: none !important;
  max-height: none !important;
  top: calc(var(--sat) + 2cqh) !important;
  background: url(../assets/ui/botao-redondo.webp) center/contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}
.map.lay .mhome img.ic {
  width: 52%;
  height: auto;
}
.map.lay .mpill {
  top: calc(var(--sat) + 2.4cqh) !important;
  border-image: url(../assets/ui/pilula-creme.webp) 0 74 fill / 0 2.6cqh;
  border-style: solid;
  border-width: 0 2.6cqh;
  border-color: transparent;
  background: none;
  box-shadow: none;
  padding: 0;
  font-size: 2.75cqh;
  font-weight: 700;
  color: var(--ink);
  -webkit-text-stroke: 0;
  text-shadow: none;
  gap: 0.8cqh;
  white-space: nowrap;
}
.map.lay .mpill > img {
  width: auto !important;
  height: 3.4cqh !important;
  display: inline-block !important;
}
.map.lay .mpanel {
  display: block;
  background: linear-gradient(#fffaf0, #f8ead0);
  border: 0.6cqh solid var(--ink);
  border-radius: 4cqh;
  box-shadow:
    inset 0 0 0 0.5cqh #fff6e2,
    0 0.8cqh 0 rgba(58, 36, 22, 0.3);
  overflow-y: auto;
  overflow-x: hidden;
}
.map.lay .grid {
  display: grid;
  grid-template-columns: repeat(3, 30.1cqw);
  grid-auto-rows: 18.8cqh;
  gap: 1.7cqh 1.2cqw;
  padding: 3cqh 0 4cqh 2.8cqw;
}
.lc {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  border-style: solid;
  border-color: transparent;
  border-image: url(../assets/ui/cartao-fase.webp) 70 fill / 2.4cqh;
  box-shadow: none;
  cursor: pointer;
}
.lc .th {
  position: absolute;
  left: 5.6%;
  right: 5.6%;
  top: 5.3%;
  height: 70%;
  border-radius: 1.6cqh;
  background-size: 230%;
  border: 0.35cqh solid var(--ink);
  overflow: hidden;
}
.lc .th.v1 {
  transform: scaleX(-1);
}
.lc .th .pk {
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 46%;
  height: auto;
  transform: translateX(-50%);
}
.lc .th.v1 .pk {
  transform: translateX(-50%) scaleX(-1);
}
.lc .sel {
  position: absolute;
  left: 1%;
  top: -2.7%;
  width: 27%;
  height: auto;
}
.lc .num {
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  font-size: 4.7cqh;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 0.7cqh var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.35cqh 0 var(--ink);
}
.lc .lk {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 26%;
  transform: translate(-50%, -50%);
}
.lc .st {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 4.5%;
  display: flex;
  justify-content: space-between;
}
.lc .st img {
  width: 31%;
  height: auto;
  filter: grayscale(1) brightness(1.5) opacity(0.55);
}
.lc .st img.on {
  filter: none;
}
.lc.lock {
  filter: grayscale(0.9) brightness(0.97);
  cursor: default;
}
.lc.lock .th {
  filter: grayscale(1) brightness(0.85) sepia(0.15);
}
.lc.cur {
  filter: drop-shadow(0 0 1.2cqh rgba(255, 212, 59, 0.95));
  animation: cur 1.4s ease-in-out infinite;
}
.lc .go {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -10%;
  height: 5cqh;
  border-width: 0 2.4cqh;
  font-style: normal;
  font-size: 2.9cqh;
  color: #fff;
  -webkit-text-stroke: 0.5cqh var(--ink);
  paint-order: stroke fill;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.win.lay .wlogo {
  transform: none;
  filter: none;
}
.wribbon {
  border-image-outset: 2.1cqh 11.1cqw 0.6cqh 11.1cqw;
}
.wmsg {
  white-space: nowrap;
}

/* ===== Álbum em pé (m03-album.json) ===== */
.win.av {
  background: rgba(40, 26, 14, 0.58);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.win.av .round {
  width: 6cqh !important;
  height: 6cqh !important;
  max-width: none !important;
  max-height: none !important;
  background: url(../assets/ui/botao-redondo.webp) center/contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  top: calc(var(--sat) + 2.1cqh) !important;
}
.win.av .agear {
  left: auto !important;
  right: 2.4cqw;
}
.win.lay.av .round > img.ic {
  width: 50%;
  height: auto;
}
.aribbon {
  border-image: url(../assets/ui/faixa-amarela.webp) 0 160 fill / 0 5.6cqh;
  border-style: solid;
  border-width: 0 5.6cqh;
  border-color: transparent;
  font-size: 3.9cqh;
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink);
  padding-bottom: 0.4cqh;
}
.asub {
  gap: 2cqw;
  font-size: 2.3cqh;
  font-weight: 700;
  color: #7a5534;
}
.asub i {
  flex: 1;
  border-top: 0.4cqh solid #d6b98f;
}
.acard {
  flex-direction: column;
  justify-content: flex-start !important;
  background: none;
  border-style: solid !important;
  border-color: transparent !important;
  border-image: url(../assets/ui/quadrinho.webp) 64 fill / 1.6cqh;
  padding-top: 0.5cqh;
}
.acard .art {
  width: auto;
  height: 7.4cqh;
  margin-top: -0.4cqh;
}
.acard.unknown .art {
  filter: brightness(0) opacity(0.28);
}
.acard .lb {
  font-size: 1.55cqh;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  margin-top: 0.3cqh;
}
.aclose {
  border-width: 0 4.4cqh;
  font-size: 4.5cqh;
  color: #fff;
  -webkit-text-stroke: 0.7cqh var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.4cqh 0 var(--ink);
  padding-bottom: 0.5cqh;
}
.afox {
  animation: bob2 2.2s ease-in-out infinite;
}

/* ===== Deitado (m10-deitado.json), só quando a tela é mais larga que alta ===== */
body:not(.land) .plupa {
  display: none;
}
@media (orientation: landscape) {
  body.land #top {
    left: 0;
    right: 0 !important;
    top: 0;
    height: calc(14 * var(--gh));
    padding: 0 !important;
    display: block !important;
  }
  body.land #top > * {
    position: absolute;
    margin: 0;
  }
  body.land .round {
    background: url(../assets/ui/botao-redondo.webp) center/contain no-repeat !important;
    border: 0 !important;
    box-shadow: none !important;
    display: grid;
    place-items: center;
  }
  body.land #pause {
    left: calc(var(--sal) + 1.5 * var(--g));
    top: calc(1.6 * var(--gh));
    width: calc(11.2 * var(--gh)) !important;
    height: calc(11.2 * var(--gh)) !important;
    max-width: none !important;
    max-height: none !important;
  }
  body.land #restart {
    left: calc(100vw - var(--sar) - (100 - 84.9) * var(--g));
    top: calc(1.1 * var(--gh));
    width: calc(11.2 * var(--gh)) !important;
    height: calc(11.2 * var(--gh)) !important;
    max-width: none !important;
    max-height: none !important;
  }
  body.land #pause .ic,
  body.land #restart .ic {
    width: 50%;
    height: auto;
  }
  body.land #hint {
    left: calc(100vw - var(--sar) - (100 - 92.8) * var(--g));
    top: calc(1.1 * var(--gh));
    width: calc(11.2 * var(--gh)) !important;
    height: calc(11.2 * var(--gh)) !important;
    max-width: none !important;
    max-height: none !important;
  }
  body.land #hint .lupa {
    width: 66%;
    height: auto;
  }
  body.land #hint #hintN {
    top: calc(-1 * var(--gh));
    right: calc(-1 * var(--gh));
    min-width: calc(4.4 * var(--gh));
    height: calc(4.4 * var(--gh));
    font-size: calc(2.6 * var(--gh));
  }
  body.land #hint small {
    display: none;
  }
  body.land .hsp {
    display: block !important;
    left: calc(100vw - var(--sar) - (100 - 89.7) * var(--g));
    top: calc(3.2 * var(--gh));
    width: calc(2.7 * var(--g));
    height: calc(6.4 * var(--gh));
  }
  body.land .pill {
    border-style: solid !important;
    border-color: transparent !important;
    background: none !important;
    box-shadow: none !important;
    border-image: url(../assets/ui/pilula-creme.webp) 0 74 fill / 0 calc(4.5 * var(--gh)) !important;
    border-width: 0 calc(4.5 * var(--gh)) !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    height: calc(9 * var(--gh));
    font-size: calc(5.4 * var(--gh)) !important;
    font-weight: 700;
    gap: calc(1 * var(--g));
  }
  body.land .lvl {
    left: calc(var(--sal) + 8.6 * var(--g));
    top: calc(3 * var(--gh));
    width: calc(23.6 * var(--g));
    justify-content: space-between;
  }
  body.land .lvl .stars i {
    font-size: calc(5.6 * var(--gh)) !important;
  }
  body.land .prog {
    left: calc(var(--sal) + 33.2 * var(--g));
    top: calc(2.7 * var(--gh));
    width: calc(13.2 * var(--g));
    height: calc(9.4 * var(--gh));
    justify-content: center;
  }
  body.land .prog .bar {
    display: none !important;
  }
  body.land .prog .plupa {
    height: calc(7 * var(--gh));
    width: auto;
  }
  /* painel lateral */
  body.land #panel {
    left: calc(100vw - var(--sar) - (100 - 77) * var(--g));
    right: auto !important;
    top: calc(14.3 * var(--gh)) !important;
    width: calc(22.1 * var(--g)) !important;
    height: calc(81.8 * var(--gh));
    max-height: none;
    padding: 0 !important;
    display: block;
    border-radius: calc(3.5 * var(--gh));
  }
  body.land #panel .head {
    position: absolute;
    left: calc(1.3 * var(--g));
    top: calc(2.7 * var(--gh));
    width: calc(20.3 * var(--g));
    height: calc(8.5 * var(--gh));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    font-size: calc(4.6 * var(--gh)) !important;
    white-space: nowrap;
    background: none;
    border: 0;
    box-shadow: none;
    border-image: url(../assets/ui/pilula-amarela.webp) 0 86 fill / 0 calc(4.2 * var(--gh));
    border-style: solid;
    border-width: 0 calc(4.2 * var(--gh));
    border-color: transparent;
  }
  body.land #panel #slots {
    position: absolute;
    left: calc(1.2 * var(--g));
    top: calc(13.5 * var(--gh));
    width: calc(20.5 * var(--g));
    height: calc(
      min(calc(15.9 * var(--gh)), calc(51 * var(--gh)) / var(--rows, 3)) * var(--rows, 3) + calc(1.1 * var(--gh)) *
        (var(--rows, 3) - 1)
    );
    display: grid;
    grid-template-columns: calc(9.9 * var(--g)) calc(9.9 * var(--g)) !important;
    grid-auto-rows: min(calc(15.9 * var(--gh)), calc(51 * var(--gh)) / var(--rows, 3)) !important;
    gap: calc(1.1 * var(--gh)) calc(0.7 * var(--g));
  }
  body.land #panel .slot {
    background: none !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image: url(../assets/ui/quadrinho.webp) 64 fill / calc(1.6 * var(--gh)) !important;
    box-shadow: none !important;
    min-height: 0;
  }
  body.land #panel .slot canvas {
    width: auto !important;
    height: calc(min(15.9 * var(--gh), 51 * var(--gh) / var(--rows, 3)) * 0.74) !important;
    max-width: 92%;
    aspect-ratio: 1;
    object-fit: contain;
  }
  body.land #panel .slot {
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  body.land #panel .zoom {
    position: absolute;
    left: calc(1.2 * var(--g));
    top: calc(67.3 * var(--gh));
    width: calc(20.5 * var(--g));
    height: calc(13 * var(--gh));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(0.4 * var(--gh));
    font-size: calc(4.1 * var(--gh));
    padding: 0 calc(1 * var(--g));
    border-width: calc(0.45 * var(--gh));
    border-radius: calc(2.4 * var(--gh));
  }
  body.land #panel .zrow {
    width: 100%;
  }
  body.land #panel .zrow .zb {
    width: calc(5.5 * var(--gh));
    height: calc(5.5 * var(--gh));
    font-size: calc(3.8 * var(--gh));
    background: var(--cream);
    flex: none;
  }
  body.land #panel .zrow input {
    flex: 1;
    min-width: 0;
  }
  body.land .foxwrap {
    left: var(--sal) !important;
    bottom: 0 !important;
    top: auto;
    width: calc(23.3 * var(--g));
  }
  body.land .foxwrap #fox {
    width: calc(25 * var(--g)) !important;
    height: auto;
    max-height: calc(45.3 * var(--gh));
    object-fit: contain;
    object-position: left bottom;
  }
  body.land .foxwrap #say {
    left: calc(21 * var(--g)) !important;
    bottom: auto !important;
    top: auto;
    transform: translateY(-100%);
    margin-top: 0;
    position: absolute;
    top: 35%;
  }
}

@media (orientation: landscape) {
  body.land .foxwrap #say {
    background: none !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image: url(../assets/ui/balao.webp) 90 110 130 160 fill / calc(2.2 * var(--gh)) calc(2.6 * var(--gh))
      calc(3.2 * var(--gh)) calc(4 * var(--gh)) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: calc(2 * var(--gh)) calc(2.4 * var(--g)) calc(4.4 * var(--gh)) calc(3 * var(--g)) !important;
    font-size: calc(3.6 * var(--gh)) !important;
    font-weight: 700;
    text-align: center;
    max-width: calc(30 * var(--g)) !important;
    min-width: calc(14 * var(--g));
  }
  body.land #panel .zrow input {
    accent-color: #6cc63f;
    height: calc(3.6 * var(--gh));
  }
}

/* rodada 7: estrelas desenhadas no placar; desfile espiando na linha */
.lvl .stars i {
  display: inline-block;
  line-height: 0;
}
.lvl .stars i img {
  height: 1em;
  width: auto;
  filter: grayscale(1) brightness(1.45) opacity(0.6);
}
.lvl .stars i.on img {
  filter: none;
}
body:not(.land) .lvl .stars i img {
  height: calc(2.4 * var(--fh));
  display: block;
}
body:not(.land) .lvl .stars {
  margin-right: calc(-1.3 * var(--fh));
}
body:not(.land) .lvl > span:first-child {
  margin-left: calc(-0.6 * var(--fh));
  font-size: calc(2.2 * var(--fh));
}
.wparade i canvas {
  margin-bottom: 0 !important;
}
.wparade {
  align-items: flex-end;
}

/* rodada 7: fundo do álbum, mapa com cadeado dourado e número, balão menor */
.win.av {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.abg {
  pointer-events: none;
}
.win.lay .abg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.abg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 26, 14, 0.42);
}
.win.av::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(40, 26, 14, 0.5);
}
.lc.lock {
  filter: none;
}
.lc.lock .th {
  filter: grayscale(1) brightness(0.8) sepia(0.2);
}
.lc.lock .num {
  filter: grayscale(0.2);
  top: 50%;
}
.lc .lk {
  top: 74%;
  width: 22%;
}
.lc.lock .st img {
  filter: grayscale(1) brightness(1.4) opacity(0.5);
}
.lc .go {
  bottom: -16%;
}
body:not(.land) #say {
  font-size: calc(2.25 * var(--fh)) !important;
}
body:not(.land) #hint {
  width: calc(7.2 * var(--fh)) !important;
  height: calc(7.2 * var(--fh)) !important;
}

.wparade i {
  flex: 1 1 0 !important;
  max-width: 16%;
  min-width: 0;
}
.lparade i {
  max-width: 10%;
}

.wparade i {
  display: flex;
  align-items: flex-end;
}
.wparade i canvas {
  margin-bottom: -6% !important;
}

/* quadrinho de destino aceso enquanto o bichinho voa (m05) */
#tray .slot.coming::before,
#panel .slot.coming::before {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 22%;
  background: radial-gradient(circle, rgba(255, 240, 140, 0.95), rgba(255, 212, 59, 0.75));
  box-shadow: 0 0 1.4vh rgba(255, 212, 59, 0.9);
  z-index: 0;
}
#tray .slot canvas,
#panel .slot canvas {
  position: relative;
  z-index: 1;
}

/* ===== Painel "Find" deitado: tudo em arte do Codex (painel, faixa, quadrinhos, caixa do zoom, bolinha) ===== */
@media (orientation: landscape) {
  body.land #panel {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-style: solid !important;
    border-color: transparent !important;
    border-image: url(../assets/ui/painel-lateral.webp) 60 fill / calc(3 * var(--gh)) !important;
  }
  body.land #panel .zoom {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-content: flex-start;
    gap: 0;
    padding: 0 !important;
  }
  body.land #panel .zrow.zimg {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 700 / 191;
    background: url(../assets/ui/caixa-zoom.webp) center/100% 100% no-repeat;
  }
  body.land #panel .zrow.zimg .zb {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22%;
    height: auto;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    opacity: 0;
    padding: 0;
  }
  body.land #panel .zrow.zimg #zout {
    left: 0;
  }
  body.land #panel .zrow.zimg #zin {
    right: 0;
  }
  body.land #panel .zrow.zimg input {
    position: absolute;
    left: 24%;
    right: 24%;
    top: 0;
    bottom: 0;
    width: 52%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  body.land #panel .zrow.zimg .knob {
    position: absolute;
    top: 50%;
    left: calc(26% + (48% * var(--v, 0) / 100));
    width: 15%;
    aspect-ratio: 90 / 96;
    transform: translate(-50%, -50%);
    background: url(../assets/ui/slider-bolinha.webp) center/contain no-repeat;
    pointer-events: none;
  }
}
#zoom {
  --v: 0;
}

/* rodada 10: leque de traços é imagem do Codex (antes eram barrinhas em CSS) */
.wspark i,
.pspark i {
  display: none !important;
}
.wspark,
.pspark {
  background: url(../assets/ui/tracos.webp) center / contain no-repeat;
}
.wspark.r,
.pspark.r {
  transform: scaleX(-1);
}
/* abertura nova (07/11, pedido do William): botões presos nos cantos de cima, raposa no meio embaixo,
   3 bichinhos em cada canto de baixo (arte do Codex). Medidas pela tela, valem em pé e deitado. */
.title .tcorner {
  position: fixed !important;
  top: calc(var(--sat) + 1.4vmin + 4px) !important;
  width: clamp(48px, 8.5vmin, 128px) !important;
  height: auto !important;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0 !important;
  box-shadow: none !important;
  background: url(../assets/ui/botao-redondo.webp) center / contain no-repeat !important;
  display: grid;
  place-items: center;
  z-index: 4;
  font-size: 0;
  cursor: pointer;
}
.title .tcorner.tgear {
  left: calc(var(--sal) + 1.4vmin + 4px) !important;
  right: auto !important;
}
.title .tcorner.tsnd {
  right: calc(var(--sar) + 1.4vmin + 4px) !important;
  left: auto !important;
}
.title .tcorner img {
  width: 56% !important;
  height: auto !important;
  max-width: none;
  display: block;
  position: static;
}
.title .tcorner:active {
  transform: scale(0.94);
}
.title .tcl {
  position: fixed !important;
  bottom: -1.2vmin;
  width: var(--cw);
  height: auto;
  pointer-events: none;
  z-index: 2;
  animation: tclbob 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
  margin: 0;
}
.title .tcl.l {
  left: -1.4vmin;
}
.title .tcl.r {
  right: -1.4vmin;
  animation-delay: -1.6s;
}
@keyframes tclbob {
  50% {
    transform: translateY(-0.6vmin);
  }
}
.title .tfoxn {
  position: fixed !important;
  left: calc(50% - var(--fw) / 2);
  bottom: var(--fb);
  width: var(--fw);
  height: auto;
  pointer-events: none;
  z-index: 1;
  transform-origin: 50% 100%;
  animation: wave 2.2s ease-in-out infinite;
  margin: 0;
}
.title {
  --cw: min(36vw, 60vh);
  --fw: min(15vw, 23vh);
  --fb: 1.2vh;
}
body:not(.land) .title {
  --cw: min(33vw, 22vh);
  --fw: min(33vw, 20vh);
  --fb: calc(var(--vh, 100vh) * 0.055);
} /* raposa maior e mais alta, entre os cantos */
.title.tland {
  justify-content: flex-start;
  padding-top: calc(var(--sat) + 5vh);
  gap: 1.6vh;
}
.title.tland .logo {
  width: min(40vw, 46vh);
}
.title.tland .play {
  font-size: clamp(26px, 6.4vh, 64px);
  padding: 0.32em 1.9em;
}
.title.tland p.sub {
  font-size: clamp(14px, 2.5vh, 26px);
  padding: 0.3em 1em;
}

/* ajustes: linhas de volume no visual da pausa */
.srow {
  display: flex !important;
  align-items: center;
  gap: 1.6cqh;
  background: #fff8e8;
  border: max(3px, 0.45cqh) solid var(--ink);
  border-radius: 2.4cqh;
  padding: 0 2cqh;
  box-sizing: border-box;
  font-weight: 700;
  color: var(--ink);
}
.srow .sl {
  display: flex;
  align-items: center;
  gap: 1cqh;
  font-size: 3cqh;
  flex: 0 0 18.5cqh;
  white-space: nowrap;
}
.srow .sl img {
  height: 3.6cqh;
  width: auto;
}
.srow .sv {
  font-size: 2.4cqh;
  min-width: 6.5cqh;
  text-align: right;
  opacity: 0.8;
}
.srow input[type='range'] {
  flex: 1;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 1.9cqh;
  margin: 0;
  border-radius: 99px;
  border: max(2px, 0.35cqh) solid var(--ink);
  background: linear-gradient(90deg, #6cc63f var(--p, 70%), #eadbc2 var(--p, 70%));
  cursor: pointer;
  touch-action: none;
}
.srow input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4.4cqh;
  height: 4.4cqh;
  border: 0;
  border-radius: 50%;
  background: url(../assets/ui/slider-bolinha.webp) center / contain no-repeat;
}
.srow input[type='range']::-moz-range-thumb {
  width: 4.4cqh;
  height: 4.4cqh;
  border: 0;
  background: url(../assets/ui/slider-bolinha.webp) center / contain no-repeat;
}
.lv2 .srow .sl {
  font-size: 4.6cqh;
  flex-basis: 27cqh;
}
.lv2 .srow .sl img {
  height: 5.4cqh;
}
.lv2 .srow .sv {
  font-size: 3.6cqh;
}
.win.sv.lv2 .psec {
  font-size: 4.6cqh;
}
.win.sv.lv2 .presume {
  font-size: 6.4cqh;
}
.win.sv.lv2 .pribbon {
  font-size: 6.6cqh;
}
.lv2 .srow input[type='range'] {
  height: 2.4cqh;
}
.lv2 .srow input[type='range']::-webkit-slider-thumb {
  width: 5.4cqh;
  height: 5.4cqh;
}
/* ajustes em pé: nome e número em cima, barra embaixo na largura toda (rótulo inteiro em qualquer idioma) */
.win.sv:not(.lv2) .srow {
  flex-wrap: wrap;
  align-content: center;
  row-gap: 0.5cqh;
  column-gap: 1cqh;
}
.win.sv:not(.lv2) .srow .sl {
  flex: 1 1 auto;
  font-size: 2.6cqh;
}
.win.sv:not(.lv2) .srow .sl img {
  height: 3cqh;
}
.win.sv:not(.lv2) .srow .sv {
  font-size: 2.3cqh;
}
.win.sv:not(.lv2) .srow input[type='range'] {
  order: 3;
  flex: 1 0 100%;
  height: 1.7cqh;
}
.win.sv:not(.lv2) .srow input[type='range']::-webkit-slider-thumb {
  width: 3.6cqh;
  height: 3.6cqh;
}
/* mapa deitado medido pela altura (em tela alta os cartões não ficam miúdos) */
body.land .map .grid {
  grid-template-columns: repeat(auto-fill, minmax(max(92px, 19vh), 1fr));
  grid-auto-rows: max(104px, 22vh);
  gap: max(12px, 1.8vh);
}
body.land .maptop .round {
  width: max(46px, 7vh);
  height: max(46px, 7vh);
}
body.land .maptop .pill {
  font-size: max(15px, 2.6vh);
}
body.land .maptop h2 {
  font-size: max(22px, 3.6vh);
}
body.land .maphead img {
  height: max(70px, 10vh);
}
body.land .maphead .mfox {
  height: max(76px, 11vh);
}
body.land .map .lv > b {
  font-size: max(30px, 4.4vh);
  bottom: max(34px, 4.6vh);
}
body.land .map .lv span i {
  font-size: max(18px, 2.6vh);
}
body.land .map .lv em.go {
  font-size: max(14px, 2vh);
}
.lleaf {
  pointer-events: none;
}
.lleaf.l img {
  transform: scaleX(-1) rotate(-8deg);
}
.lleaf.r img {
  transform: rotate(8deg);
}
/* m09: linhas finas dos dois lados do contador da bandeja de 2 fileiras */
body:not(.land) #tray.two .tcount::before,
body:not(.land) #tray.two .tcount::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(8.8 * var(--f));
  border-top: calc(0.25 * var(--fh)) solid rgba(58, 36, 22, 0.55);
}
body:not(.land) #tray.two .tcount::before {
  right: calc(100% + 1 * var(--f));
}
body:not(.land) #tray.two .tcount::after {
  left: calc(100% + 1 * var(--f));
}
/* m11: raposa sem contorno branco de adesivo; texto da pílula cabe */
.lv2 .wfoxj img {
  filter: none;
}
.lmsg span {
  font-size: 4cqh;
}
/* m08: bichinhos do desfile ~20% maiores */
.wparade:not(.lparade) i {
  max-width: 19% !important;
}
/* m01: botões dos cantos em pé com o tamanho do mockup (12,5% da largura, 6,4% da altura) */
body:not(.land) .title .tcorner {
  width: clamp(48px, min(12.5vw, 6.4vh), 128px) !important;
}
/* check verde entra com um pequeno exagero (overshoot) */
.slot.got::after {
  animation: chkpop 0.42s cubic-bezier(0.2, 1.8, 0.4, 1) both;
}
@keyframes chkpop {
  from {
    transform: scale(0) rotate(-30deg);
  }
}
/* faixa da abertura deitada: imagem com as folhas (sem emoji) e sem esticar a ponta */
.title.tland p.sub {
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  --sh: clamp(30px, 5.6vh, 58px);
  height: var(--sh);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 0.3em;
  border-image: url(../assets/ui/faixa-sub.webp) 0 110 fill / 0 calc(var(--sh) * 110 / 177);
  border-width: 0 calc(var(--sh) * 110 / 177);
  border-style: solid;
}
.title.tland p.sub::before,
.title.tland p.sub::after {
  content: none;
}
/* painéis de som e ajustes: fundo desfocado para não duplicar a raposa e o logo de trás */
.win.sv {
  backdrop-filter: blur(7px) saturate(0.9);
  -webkit-backdrop-filter: blur(7px) saturate(0.9);
  background: rgba(58, 36, 22, 0.32);
}
/* linha de ajuste com chave e lista suspensa */
.srow-t {
  justify-content: space-between;
}
.srow-t .sl {
  flex: 1 1 auto !important;
}
.srow .sw {
  position: relative;
  flex: none;
  width: 9cqh;
  height: 4.6cqh;
  border-radius: 99px;
  border: max(2px, 0.4cqh) solid var(--ink);
  background: #d9cbb0;
  padding: 0;
  cursor: pointer;
  transition: background 0.16s;
}
.srow .sw::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.35cqh;
  width: 3.4cqh;
  height: 3.4cqh;
  border-radius: 50%;
  background: #fff;
  border: max(2px, 0.35cqh) solid var(--ink);
  transform: translateY(-50%);
  transition: transform 0.22s cubic-bezier(0.3, 1.6, 0.5, 1);
  box-sizing: border-box;
}
.srow .sw.on {
  background: #6cc63f;
}
.srow .sw.on::after {
  transform: translate(4.3cqh, -50%);
}
.srow .langsel {
  flex: none;
  font:
    700 2.5cqh Fredoka,
    system-ui,
    sans-serif;
  color: var(--ink);
  background: #fff;
  border: max(2px, 0.35cqh) solid var(--ink);
  border-radius: 1.6cqh;
  padding: 0.4cqh 1.2cqh;
  max-width: 55%;
}
.win.sv:not(.lv2) .srow-t {
  flex-wrap: nowrap !important;
}
.lv2 .srow .sw {
  width: 11cqh;
  height: 5.6cqh;
}
.lv2 .srow .sw::after {
  width: 4.2cqh;
  height: 4.2cqh;
}
.lv2 .srow .sw.on::after {
  transform: translate(5.2cqh, -50%);
}
.lv2 .srow .langsel {
  font-size: 3.4cqh;
}
/* texto em arco nas faixas da vitória */
.wribbon .arct {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -7cqh;
  width: calc(100% + 14cqh);
  height: 100%;
  overflow: visible;
  display: block;
} /* cobre a faixa inteira, pontas incluídas */
.arct text {
  font-family: Fredoka, system-ui, sans-serif;
  font-weight: 700;
  fill: var(--ink);
}
.wribbon,
.lribbon {
  padding: 0 !important;
}
/* vitória em pé: bichinhos 10% menores e o texto com folga */
.wparade:not(.lparade) i {
  max-width: 17% !important;
}
.wmsg {
  margin: 0;
}
/* bichinhos da bandeja, do desfile e do álbum: arte do Codex inteira, sem esticar nem cortar */
.slot {
  position: relative;
}
.slot img.pkimg {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: auto !important;
  height: 76% !important;
  max-width: 92%;
  object-fit: contain;
  z-index: 1;
}
.wparade i img.pkimg {
  width: 100%;
  height: auto;
  display: block;
  animation:
    hop 0.5s cubic-bezier(0.3, 1.8, 0.5, 1) both,
    bob2 1.6s ease-in-out 1.2s infinite;
}
.acard img.art {
  object-fit: contain;
}
/* ---------- tela de fases deitada (desktop e celular): um fundo, container centralizado, sem emoji ---------- */
.map.lmap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  background: none;
}
.lm-wrap {
  width: min(96vw, 200vh, 1600px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
  padding: calc(var(--sat) + 2vh) 0 calc(var(--sab) + 2vh);
  box-sizing: border-box;
}
.lm-top {
  display: flex;
  align-items: center;
  gap: 1.6vh;
  flex: none;
}
.lm-back {
  width: clamp(44px, 9vh, 96px);
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: url(../assets/ui/botao-redondo.webp) center / contain no-repeat;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lm-back img {
  width: 52%;
  height: auto;
}
.lm-title {
  margin: 0;
  height: clamp(40px, 8.4vh, 88px);
  display: flex;
  align-items: center;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-amarela.webp) 0 86 fill / 0 clamp(20px, 4.2vh, 44px);
  border-width: 0 clamp(20px, 4.2vh, 44px);
  font-size: clamp(20px, 4.4vh, 46px);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  padding-bottom: 0.5vh;
}
.lm-right {
  margin-left: auto;
  display: flex;
  gap: 1.4vh;
}
.lm-pill {
  height: clamp(38px, 7.6vh, 80px);
  display: flex;
  align-items: center;
  gap: 1vh;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 0 74 fill / 0 clamp(18px, 3.6vh, 38px);
  border-width: 0 clamp(18px, 3.6vh, 38px);
  background: none;
  font:
    700 clamp(16px, 3.4vh, 36px) Fredoka,
    system-ui,
    sans-serif;
  color: var(--ink);
  white-space: nowrap;
  padding: 0 0 0.4vh;
  cursor: default;
}
button.lm-pill {
  cursor: pointer;
}
.lm-pill img {
  height: 70%;
  width: auto;
}
.lm-panel {
  flex: 1;
  min-height: 0;
  background: linear-gradient(#fef2d6, #fce6c0);
  border: max(4px, 0.7vh) solid var(--ink);
  border-radius: clamp(18px, 4vh, 40px);
  box-shadow:
    inset 0 0 0 max(3px, 0.5vh) #fff7e4,
    0 0.8vh 0 rgba(58, 36, 22, 0.35);
  overflow: hidden;
}
.lm-grid {
  height: 100%;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(110px, 21vh, 230px), 1fr));
  gap: 4.4vh 2.2vh;
  padding: 3.4vh 3vh 6vh;
  box-sizing: border-box;
  align-content: start;
}
/* cartão medido por ele mesmo: número, estrelas e Play nunca se atropelam */
.lmap .lc {
  container-type: size;
  aspect-ratio: 0.71;
  width: 100%;
  height: auto;
  border-image: url(../assets/ui/cartao-fase.webp) 70 fill / clamp(10px, 2.4vh, 24px);
}
.lmap .lc .th {
  border-width: 1.6cqh;
  border-radius: 7cqh;
}
.lmap .lc .num {
  font-size: 20cqh;
  -webkit-text-stroke: 3cqh var(--ink);
  text-shadow: 0 1.6cqh 0 var(--ink);
}
.lmap .lc .go {
  height: 22cqh;
  border-width: 0 10cqh;
  font-size: 12.5cqh;
  -webkit-text-stroke: 2.2cqh var(--ink);
}
.lmap .lc.cur {
  filter: drop-shadow(0 0 5cqh rgba(255, 212, 59, 0.95));
}
/* painel "Find" deitado: lista centrada entre o título e o zoom, check inteiro, bichinho com folga, último sozinho no meio */
body.land #panel #slots {
  height: calc(52 * var(--gh)) !important;
  align-content: center;
  justify-content: center;
}
body.land #panel .slot {
  overflow: visible !important;
}
body.land #panel .slot img.pkimg {
  height: 70% !important;
  max-width: 80%;
}
body.land #panel .slot:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(9.9 * var(--g));
}
body.land #panel .slot.got::after,
body.land #panel .slot .chk {
  right: 4% !important;
  top: 4% !important;
  left: auto !important;
  width: 24% !important;
  height: auto !important;
  aspect-ratio: 1;
  background: url(../assets/ui/check.webp) center / contain no-repeat !important;
  border: 0 !important;
  color: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  z-index: 2;
}
body.land #panel .slot.got img.pkimg {
  filter: saturate(0.85);
}
/* cartões da tela de fases deitada: cadeado no meio da miniatura, número embaixo dela, Play sem invadir a fileira de baixo */
.lmap .lc .lk {
  top: 36% !important;
  width: 32% !important;
}
.lmap .lc .num {
  top: 54% !important;
}
.lmap .lc.lock .num {
  top: 56% !important;
}
.lmap .lc .go {
  bottom: -9% !important;
}
.lmap .lc.cur .st {
  visibility: hidden;
}
.lm-grid {
  row-gap: 5.6vh !important;
}
/* painel "Find" (crítico UI/UX, 07/11): achado x falta com contraste, progresso visível, bichinhos maiores, zoom claro */
body.land #panel {
  filter: drop-shadow(0 calc(0.9 * var(--gh)) 0 rgba(58, 36, 22, 0.4));
}
body.land #panel .head {
  top: calc(2.2 * var(--gh)) !important;
  height: calc(7 * var(--gh)) !important;
  font-size: calc(3.8 * var(--gh)) !important;
}
body.land #panel .pcount {
  position: absolute;
  left: 50%;
  top: calc(8.4 * var(--gh));
  transform: translateX(-50%);
  height: calc(3.6 * var(--gh));
  padding: 0 calc(1.8 * var(--gh));
  display: flex;
  align-items: center;
  border-radius: 99px;
  background: linear-gradient(#8fd45a, #5fae2e);
  border: calc(0.35 * var(--gh)) solid var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: calc(2.4 * var(--gh));
  -webkit-text-stroke: calc(0.45 * var(--gh)) var(--ink);
  paint-order: stroke fill;
  z-index: 2;
  white-space: nowrap;
}
body.land #panel #slots {
  top: calc(13.6 * var(--gh)) !important;
  height: calc(51 * var(--gh)) !important;
}
body.land #panel .slot img.pkimg {
  height: 84% !important;
  max-width: 88%;
  filter: drop-shadow(0 calc(0.35 * var(--gh)) 0 rgba(58, 36, 22, 0.25));
  transition:
    opacity 0.3s,
    filter 0.3s;
}
body.land #panel .slot.got {
  border-image-source: url(../assets/ui/quadrinho-ok.webp) !important;
}
body.land #panel .slot.got img.pkimg {
  opacity: 0.55;
  filter: saturate(0.6);
}
body.land #panel .slot:last-child:nth-child(odd) {
  width: auto !important;
  justify-self: stretch !important;
}
body.land #panel .zoom > span:first-child {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--gh));
  font-size: calc(2.6 * var(--gh)) !important;
  color: #7a4a22;
  width: 100%;
  justify-content: center;
  margin-bottom: calc(0.4 * var(--gh));
}
body.land #panel .zoom > span:first-child::before,
body.land #panel .zoom > span:first-child::after {
  content: '';
  flex: 1;
  max-width: calc(4 * var(--gh));
  border-top: calc(0.3 * var(--gh)) solid rgba(122, 74, 34, 0.55);
}
body.land #panel .zrow.zimg .zfill {
  position: absolute;
  left: 25%;
  top: 50%;
  height: 24%;
  width: calc(48% * var(--v, 0) / 100 + 2%);
  transform: translateY(-50%);
  border-radius: 99px;
  background: linear-gradient(#9fe068, #5fae2e);
  pointer-events: none;
}
/* painel "Find", 2ª rodada do crítico */
body.land #panel .slot.got img.pkimg {
  opacity: 1 !important;
  filter: drop-shadow(0 calc(0.35 * var(--gh)) 0 rgba(58, 36, 22, 0.25)) !important;
}
body.land #panel .pcount {
  top: calc(9.8 * var(--gh)) !important;
  height: calc(4.6 * var(--gh)) !important;
  font-size: calc(3 * var(--gh)) !important;
  padding: 0 calc(2.4 * var(--gh)) !important;
  min-width: 22%;
  justify-content: center;
}
body.land #panel #slots {
  top: calc(15.6 * var(--gh)) !important;
  height: calc(48.6 * var(--gh)) !important;
}
body.land #panel .slot:last-child:nth-child(odd) {
  width: calc(9.9 * var(--g)) !important;
  justify-self: center !important;
}
body.land #panel .slot.got::after {
  right: -6% !important;
  top: -6% !important;
}
body.land #panel .zoom {
  top: calc(65.6 * var(--gh)) !important;
}
body.land #panel .pcount {
  top: calc(8.9 * var(--gh)) !important;
}
body.land #panel #slots {
  top: calc(16.2 * var(--gh)) !important;
  height: calc(47.4 * var(--gh)) !important;
  grid-auto-rows: min(calc(14.6 * var(--gh)), calc(45 * var(--gh)) / var(--rows, 3)) !important;
}
/* deitado: som, reiniciar e dica do mesmo tamanho, alinhados à largura do painel, ícones iguais */
body.land #sndb {
  position: absolute;
  left: calc(100vw - var(--sar) - (100 - 77) * var(--g));
  top: calc(1.1 * var(--gh));
  width: calc(11.2 * var(--gh)) !important;
  height: calc(11.2 * var(--gh)) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0;
}
body.land #sndb .ic,
body.land #restart .ic,
body.land #hint .lupa {
  width: 52% !important;
  height: auto !important;
}
body.land .hsp {
  display: none !important;
}
/* placar deitado: estrelas com folga da borda da pílula */
body.land .lvl .stars {
  margin-right: calc(1.4 * var(--gh));
}
body.land .lvl .stars i img {
  height: calc(4.8 * var(--gh)) !important;
}
/* tela de fases deitada centralizada */
.map.lmap {
  align-items: center;
}
/* pausa deitada: fundo nítido (pedido) e ícones em imagem do tamanho do texto */
.win.sv.crisp {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(58, 36, 22, 0.28);
}
.win.sv.lv2 .psec > img.ic {
  height: 4.8cqh;
  width: auto;
  margin-right: 1.2cqh;
}
.win.sv.lv2 .presume > img.ic {
  height: 5.6cqh;
  width: auto;
  margin-right: 1.2cqh;
  filter: brightness(0) invert(1) drop-shadow(0.3cqh 0 0 #3a2416) drop-shadow(-0.3cqh 0 0 #3a2416)
    drop-shadow(0 0.3cqh 0 #3a2416) drop-shadow(0 -0.3cqh 0 #3a2416);
}
/* abertura: os raios de luz ficam atrás do logo, da faixa e do Play */
.title::before {
  z-index: 0;
  pointer-events: none;
}
.title.tland > .logo,
.title.tland > .sub,
.title.tland > .play,
.title.lay > .stage {
  position: relative;
  z-index: 1;
}
/* balão: o fundo é a arte montada em canvas (bubbleBg); sem 9-slice do navegador e sem o triângulo antigo */
body.land .foxwrap #say,
body:not(.land) #tray #say,
.foxwrap #say,
#tray #say,
#say {
  border-image: none !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-size: 100% 100% !important;
  background-origin: border-box !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}
#say::after {
  display: none !important;
}
/* vitória deitada: a frase fica acima dos bichinhos e eles não a cobrem */
.lmsg {
  z-index: 3;
}
.lparade i {
  max-width: 10.5% !important;
}
/* pílulas sem esticar: a ponta da arte mede 86/175 (amarela) ou 74/148 (creme) da altura */
body.land #panel .head {
  border-image-width: 0 calc(7 * var(--gh) * 86 / 175) !important;
  border-width: 0 calc(7 * var(--gh) * 86 / 175) !important;
}
.win.sv.lv2 .pribbon {
  border-width: 0 calc(11.5cqh * 86 / 175) !important;
  border-image-width: 0 calc(11.5cqh * 86 / 175) !important;
}
.lribbon {
  border-width: 0 calc(12.4cqh * 86 / 175) !important;
}
.map.lay .mpill {
  border-image-width: 0 calc(5.5cqh * 74 / 148) !important;
  border-width: 0 calc(5.5cqh * 74 / 148) !important;
}
.lm-pill {
  border-image-width: 0 clamp(19px, 3.8vh, 40px) !important;
  border-width: 0 clamp(19px, 3.8vh, 40px) !important;
}
/* mãozinha de arrastar (swipe): arte da mão do tutorial deslizando, com um rastro dourado */
.swipehand {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  width: clamp(150px, 26vmin, 300px);
  height: clamp(70px, 12vmin, 130px);
  transform: translate(-50%, -50%);
}
.swipehand img {
  position: absolute;
  left: 50%;
  top: 20%;
  width: 34%;
  height: auto;
  transform-origin: 30% 10%;
  filter: drop-shadow(0 0.6vmin 0 rgba(58, 36, 22, 0.3));
  animation: swipehand 1.5s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
.swipehand .trail {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 18%;
  height: 12%;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(255, 226, 110, 0), rgba(255, 226, 110, 0.85) 50%, rgba(255, 226, 110, 0));
  box-shadow: 0 0 1.2vmin rgba(255, 214, 60, 0.7);
  animation: swipetrail 1.5s ease-in-out infinite;
}
@keyframes swipehand {
  0% {
    transform: translateX(-120%) rotate(-10deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  20% {
    transform: translateX(-120%) rotate(-10deg) scale(0.94);
  }
  70% {
    transform: translateX(60%) rotate(8deg) scale(0.94);
  }
  85% {
    transform: translateX(60%) rotate(8deg);
    opacity: 1;
  }
  100% {
    transform: translateX(60%) rotate(8deg);
    opacity: 0;
  }
}

/* End of css/game-2.css */