/* ---- pausa em pé: caixas do mockup (07-pausa-celular.json) ---- */
.modal.pz {
  display: block;
}
.modal.pz .card.pzcard {
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  display: block;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-radius: 0;
  border-image: url(../assets/ui/painel-popup.webp) 90 fill / calc(var(--mw) * 0.09);
}
.modal.pz .card.pzcard > .rel {
  position: absolute;
  margin: 0;
}
.modal.pz .peek img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal.pz .peek {
  display: block;
  top: auto;
}
.modal.pz .pzbrilho.e {
  transform: scaleX(-1);
}
.modal.pz .card.pzcard > .plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: url(../assets/ui/placa-creme.webp) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  font-size: calc(var(--mh) * 0.054);
}
.modal.pz .card.pzcard > .btn.green {
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-radius: 0;
  border-image: url(../assets/ui/btn-verde.webp) 76 fill / calc(var(--mh) * 0.05);
  font-size: calc(var(--mh) * 0.06);
}
.modal.pz .card.pzcard > .btn.green::before,
.modal.pz .card.pzcard > .btn.green .spk {
  display: none;
}
.modal.pz .card.pzcard > .pillbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
  padding: 0;
  font-size: calc(var(--mh) * 0.034);
  border-radius: 99px;
}
.modal.pz .card.pzcard > .set {
  display: flex;
  align-items: center;
  gap: 4%;
  padding: 0 4%;
  background: url(../assets/ui/pilula-creme.webp) center / 100% 100% no-repeat;
}
.modal.pz .card.pzcard > .set span {
  display: none;
}
.modal.pz .card.pzcard > .set .ico {
  width: auto;
  height: 60%;
}
.modal.pz .card.pzcard > .set .vol {
  flex: 1;
  min-width: 0;
}

/* ---- ajustes em pé: caixas do mockup (08-ajustes-celular.json); reaproveita .modal.pz da pausa ---- */
.modal.pz .card.stcard > .set {
  display: flex;
  align-items: center;
  gap: 3%;
  padding: 0;
  background: none;
  font-size: calc(var(--mh) * 0.026);
}
.modal.pz .card.stcard > .set span {
  display: inline;
  white-space: nowrap;
}
.modal.pz .card.stcard > .set .ico {
  width: auto;
  height: 100%;
}
.modal.pz .card.stcard > .stsom .vol,
.modal.pz .card.stcard > .stmus .vol {
  margin-left: auto;
  flex: 0 0 50%;
}
.modal.pz .card.stcard > .set .tog,
.modal.pz .card.stcard > .set input[type='checkbox'] {
  margin-left: auto;
}
.modal.pz .card.stcard > .stlang .langsel {
  margin-left: auto;
  width: 46%;
  height: 100%;
  appearance: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 63 fill / calc(var(--mh) * 0.019);
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  padding: 0 4%;
}
.modal.pz .card.stcard > .divisor {
  background: #e8c9a0;
  border-radius: 99px;
}
.modal.pz .card.stcard > .closex {
  background-size: contain;
}
.modal.pz .card.stcard > .btn.green {
  font-size: calc(var(--mh) * 0.05);
}

.modal.pz .card.pzcard > .plate {
  background: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/placa-creme.webp) 0 14% fill / 0 calc(var(--mh) * 0.035);
}

/* ---- fases deitado: caixas do mockup (11-fases-deitado.json) ---- */
#levels.fld {
  display: block;
  padding: 0;
}
#levels.fld .lhead,
#levels.fld .worlds {
  position: static;
  display: block;
}
#levels.fld .lvowl {
  display: none;
}
#levels.fld .llogo {
  object-fit: contain;
}
#levels.fld .peekowl {
  display: block;
}
#levels.fld .peekowl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#levels.fld > .plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/placa-creme.webp) 0 14% fill / 0 calc(var(--mh) * 0.057);
  font-size: calc(var(--mh) * 0.063);
  text-transform: uppercase;
}
#levels.fld .worlds .world {
  margin: 0;
  padding: 0;
  display: block;
  box-shadow: none;
  border: calc(var(--mw) * 0.018) solid transparent;
  border-image: url(../assets/ui/painel-madeira.webp) 90 / calc(var(--mw) * 0.022);
  border-radius: calc(var(--mw) * 0.02);
  background-origin: padding-box;
  background-clip: padding-box;
  overflow: visible;
}
#levels.fld .worlds .world > .plate {
  position: absolute;
  left: 34.3%;
  top: 3.2%;
  width: 36%;
  height: 13.7%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/placa-creme.webp) 0 14% fill / 0 calc(var(--mh) * 0.044);
  font-size: calc(var(--mh) * 0.06);
}
#levels.fld .worlds .strip {
  position: absolute;
  left: 3.8%;
  top: 72.2%;
  width: 92.4%;
  height: 22.2%;
  padding: 1.2%;
  gap: 0.8%;
}
#levels.fld .strip .btn.node {
  height: 100%;
  aspect-ratio: auto;
  font-size: calc(var(--mh) * 0.05);
}

#levels.fld .worlds .world {
  border: 0 solid transparent;
  border-image-width: calc(var(--mw) * 0.022);
  background-size: cover;
}

/* ---- vitória deitado: caixas do mockup (14-vitoria-deitado.json) ---- */
.modal.wl {
  display: block;
}
.modal.wl .card.wlcard {
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: visible;
}
.modal.wl .card.wlcard .rel,
.modal.wl .card.wlcard .thumbs > .rel {
  position: absolute;
  margin: 0;
}
.modal.wl .winlogo {
  object-fit: contain;
  z-index: 2;
}
.modal.wl .card.wlcard h2 {
  white-space: nowrap;
  text-align: center;
  font-size: calc(var(--mh) * 0.09);
  line-height: 1;
}
.modal.wl .card.wlcard .stars {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.modal.wl .card.wlcard .stars svg,
.modal.wl .card.wlcard .stars svg.mid {
  width: 30%;
  height: 100%;
  margin: 0;
}
.modal.wl .card.wlcard .thumbs {
  display: block;
}
.modal.wl .card.wlcard .thumb {
  max-width: none;
  max-height: none;
  border: calc(var(--mw) * 0.006) solid #fff;
  border-radius: calc(var(--mw) * 0.012);
  box-shadow: 0 0 0 calc(var(--mw) * 0.003) var(--ink);
}
.modal.wl .card.wlcard .owlwin {
  display: block;
}
.modal.wl .card.wlcard .owlwin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal.wl .card.wlcard .btn.round {
  background-size: contain;
}
.modal.wl .card.wlcard .btn.green {
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-radius: 0;
  border-image: url(../assets/ui/btn-verde.webp) 76 fill / calc(var(--mh) * 0.068);
  font-size: calc(var(--mh) * 0.08);
}
.modal.wl .card.wlcard .btn.green::before,
.modal.wl .card.wlcard .btn.green .spk {
  display: none;
}

.modal.wl .card.wlcard {
  overflow: hidden;
  border: 0 solid transparent;
  border-image: url(../assets/ui/painel-madeira.webp) 90 / calc(var(--mw) * 0.02);
  border-radius: calc(var(--mw) * 0.03);
  background: radial-gradient(ellipse at 50% 58%, #fff6b0 0%, #ffe066 22%, #ffc6dd 52%, #ff9fcb 100%);
}
.modal.wl .card.wlcard .rays,
.modal.wl .card.wlcard .confetti:not(.fixo) {
  display: none;
}
.modal.wl .card.wlcard .wlmoitas {
  object-fit: cover;
  object-position: bottom;
  pointer-events: none;
}
.modal.wl .card.wlcard .stars img {
  position: static;
  width: 31%;
  height: 100%;
  object-fit: contain;
}
.modal.wl .card.wlcard .stars img.off {
  filter: grayscale(1) brightness(1.25) opacity(0.55);
}
.modal.wl .card.wlcard > .btn {
  z-index: 2;
}

/* ---- partida deitado: caixas do mockup (12-partida-deitado.json) ---- */
#hud.fgl .side,
#hud.fgl .side .row,
#hud.fgl .boosts {
  position: static;
  display: block;
  pointer-events: none;
}
#hud.fgl .fit {
  pointer-events: auto;
}
#hud.fgl .hudlogo {
  object-fit: contain;
}
#hud.fgl .pill {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 63 fill / calc(var(--mh) * 0.04);
  font-size: calc(var(--mh) * 0.05);
  color: var(--ink);
}
#hud.fgl .pill.cnt img {
  height: 80%;
  width: auto;
}
#hud.fgl .pill.stars5 svg {
  width: 17%;
  height: auto;
}
#hud.fgl .btn.round {
  background-size: contain;
}
#hud.fgl #owl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#hud.fgl .bbar {
  border: 0 solid transparent;
  border-image: url(../assets/ui/barra-madeira.webp) 45% 12% fill / calc(var(--mh) * 0.053) calc(var(--mh) * 0.05);
}
#hud.fgl .blabel {
  font-size: calc(var(--mh) * 0.045);
}
#hud.fgl .btn.boost {
  border: 0;
  box-shadow: none;
  background: url(../assets/ui/btn-creme.webp) center / contain no-repeat;
}
#hud.fgl .btn.boost.reveal {
  background-image: url(../assets/ui/ajuda-lupa.webp);
}
#hud.fgl .btn.boost.eye {
  background-image: url(../assets/ui/ajuda-olho.webp);
}
#hud.fgl .btn.boost.reveal > img,
#hud.fgl .btn.boost.eye > img {
  visibility: hidden;
}
#hud.fgl .btn.boost .badge {
  min-width: calc(var(--mh) * 0.05);
  height: calc(var(--mh) * 0.05);
  font-size: calc(var(--mh) * 0.032);
}

/* pausa deitado: mesmas regras da pausa em pé (.modal.pz), tamanhos de fonte pela altura do mockup deitado */
.modal.pzl .card.pzcard > .plate {
  border-image-source: url(../assets/ui/placa-madeira.webp);
  border-image-width: 0 calc(var(--mh) * 0.068);
  font-size: calc(var(--mh) * 0.085);
}
.modal.pzl .card.pzcard > .btn.green {
  border-image-width: calc(var(--mh) * 0.066);
  font-size: calc(var(--mh) * 0.09);
}
.modal.pzl .card.pzcard > .pillbtn {
  font-size: calc(var(--mh) * 0.05);
}

/* tutorial em pé: caixas do mockup (03-tutorial-celular.json) */
.btn.green.big img.spk {
  width: 0.55em;
  height: auto;
  -webkit-text-stroke: 0;
}
.tutbadge .tstar {
  height: 1em;
  width: auto;
  vertical-align: -0.12em;
}
.tut.tutf .tutplate {
  transform: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/placa-madeira.webp) 0 15% fill / 0 calc(var(--mh) * 0.034);
  font-size: calc(var(--mh) * 0.05);
}
.tut.tutf .tutbadge {
  bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  padding: 0;
  background: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 63 fill / calc(var(--mh) * 0.021);
  font-size: calc(var(--mh) * 0.03);
}
.tut.tutf .btn.tutgo {
  transform: none;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-radius: 0;
  border-image: url(../assets/ui/btn-verde.webp) 76 fill / calc(var(--mh) * 0.052);
  font-size: calc(var(--mh) * 0.068);
}
.tut.tutf .btn.tutgo::before {
  display: none;
}
.tut.tutf .btn.tutback {
  background-size: contain;
}

/* ---- lote 5: arte recortada do mockup (rodada 11) ---- */
#hud.fg .ribbon {
  border-image: url(../assets/ui/hud-faixa2.webp) 0 22% fill / 0 calc(var(--mh) * 0.06);
}
.modal.pz:not(.pzl) .card.pzcard:not(.stcard) > .plate {
  border-image: url(../assets/ui/pausa-faixa.webp) 0 24% fill / 0 calc(var(--mh) * 0.07);
}
.modal.pz .card.stcard > .plate {
  border-image: url(../assets/ui/ajustes-faixa.webp) 0 22% fill / 0 calc(var(--mh) * 0.068);
  color: #fff8e6;
  -webkit-text-stroke: calc(var(--mh) * 0.004) var(--ink);
  paint-order: stroke fill;
}
.modal.pz:not(.pzl) .card.pzcard > .pillbtn {
  background: url(../assets/ui/pausa-btn-levels.webp) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  padding-left: 28%;
  justify-content: flex-start;
}
.modal.pz:not(.pzl) .card.pzcard > .pzrs {
  background-image: url(../assets/ui/pausa-btn-restart.webp);
}
.modal.pz:not(.pzl) .card.pzcard > .pillbtn svg {
  display: none;
}
.modal.pzl .card.pzcard {
  border-image: none;
  background: url(../assets/ui/pausa-painel-deitado.webp) center / 100% 100% no-repeat;
}
.tut.tutf .tutplate {
  border-image: url(../assets/ui/tut-faixa.webp) 0 22% fill / 0 calc(var(--mh) * 0.069);
}
.tut .tutbox .bubble {
  background: url(../assets/ui/tut-balao.webp) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
  padding-left: 9%;
}
.tut .tutbox .bubble::before {
  display: none;
}
#levels.fl > .plate {
  background: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/fases-faixa.webp) 0 22% fill / 0 calc(var(--mh) * 0.085);
}
#levels.fl .btn.tab:first-child.on {
  border-image: none;
  background: url(../assets/ui/aba-park.webp) center / 100% 100% no-repeat;
}
#levels.fl .btn.tab:last-child:not(.on) {
  border-image: none;
  background: url(../assets/ui/aba-beach.webp) center / 100% 100% no-repeat;
}
#levels.fl .btn.tab:first-child.on img,
#levels.fl .btn.tab:last-child:not(.on) img {
  visibility: hidden;
}
#home.fh:not(.x) .hplay {
  border-image: none;
  background: url(../assets/ui/play-retrato.webp) center / 100% 100% no-repeat;
}
body.land #home.fh .hplay {
  background: none;
  border-image: url(../assets/ui/btn-verde.webp) 76 fill / calc(var(--mh) * 0.12);
}
body:not(.land) #home.fh .hlv {
  background:
    url(../assets/ui/ic-levels-retrato.webp) center 36% / 58% no-repeat,
    url(../assets/ui/btn-creme.webp) center / contain no-repeat;
}
.modal.wl .card.wlcard {
  border-image: none;
  background: url(../assets/ui/painel-vitoria-deitado.webp) center / 100% 100% no-repeat;
}
.modal.wl .card.wlcard .wlmoitas {
  display: none;
}

/* rodada 12: ajustes da pausa apontados pelo crítico */
.modal.pz:not(.pzl) .card.pzcard:not(.stcard) > .plate {
  border-image: none;
  background: url(../assets/ui/pausa-faixa.webp) center / 100% 100% no-repeat;
  font-size: calc(var(--mh) * 0.048);
}
.modal.pz:not(.pzl) .card.pzcard > .pillbtn {
  padding-left: 31%;
  font-size: calc(var(--mh) * 0.027);
  white-space: nowrap;
  overflow: hidden;
}
.modal.pz .card.pzcard > .pzsom .ico,
.modal.pz .card.pzcard > .pzmus .ico {
  content: url(../assets/ui/ic-som.webp);
  height: 80%;
}
.modal.pz .card.pzcard > .pzmus .ico {
  content: url(../assets/ui/ic-musica.webp);
}
.modal.pz .card.pzcard {
  border-image-width: calc(var(--mw) * 0.07);
}

/* rodada 12: Play deitado e vitória deitado */
body.land #home.fh .hplay {
  padding-left: 24%;
  font-size: calc(var(--mh) * 0.13);
}
body.land #home.fh .hplay span {
  white-space: nowrap;
}
.modal.wl .card.wlcard {
  border: 0;
  box-shadow: none;
  outline: 0;
}
.modal.wl .card.wlcard .thumb {
  object-fit: cover;
}

/* rodada 12: pontas das placas na proporção da arte (largura da ponta = 0,22 × largura do arquivo / altura × altura da caixa) */
#hud.fg .ribbon {
  border-image-width: 0 calc(var(--mh) * 0.0365);
}
#hud.fg .ribbon {
  font-size: calc(var(--mh) * 0.025); /* a letra fica na faixa: shrinkToFit diminui a faixa e o texto acompanha */
  padding: 0 calc(var(--mh) * 0.026); /* não escrever em cima das pontas enroladas da placa */
}
#hud.fg .ribbon span {
  font-size: 1em;
}
#levels.fl > .plate {
  border-image-width: 0 calc(var(--mh) * 0.056);
}
.tut.tutf .tutplate {
  border-image-width: 0 calc(var(--mh) * 0.048);
}
.modal.pz .card.stcard > .plate {
  border-image-width: 0 calc(var(--mh) * 0.045);
}
#hud.fg .btn.boost .badge,
#hud.fgl .btn.boost .badge {
  background: radial-gradient(circle at 40% 35%, #8be05a, #37b52e 70%);
  border: calc(var(--mh) * 0.003) solid #fff;
  box-shadow: 0 0 0 calc(var(--mh) * 0.0015) var(--ink);
}

/* rodada 12: emenda de 1 px no meio das pílulas/botões esticados (border-image com bordas de meia altura):
   um fundo da cor do miolo por baixo esconde a fresta */
#home.fh .hlv span,
#home.fh .hst span,
#hud.fg .topbar .pill,
#hud.fgl .pill,
.tut.tutf .tutbadge,
.modal.pz .card.stcard > .stlang .langsel {
  background-color: #fbedd2;
  border-radius: 99px;
  background-clip: padding-box;
}
.card.win.fw .winrow .btn.green,
.modal.wl .card.wlcard .btn.green,
.modal.pz .card.pzcard > .btn.green,
.tut.tutf .btn.tutgo,
body.land #home.fh .hplay {
  background-color: #52cc2e;
  border-radius: 99px;
}
#home.fh:not(.x) .hplay {
  background-size: contain;
}

/* rodada 12: pílulas e botões verdes em 3 pedaços (pontas + miolo), sem a emenda do meio */
#home.fh .hlv span,
#home.fh .hst span {
  border-image-slice: 0 63 fill;
  border-image-width: 0 calc(var(--mh) * 0.0255);
}
body.land #home.fh .hlv span,
body.land #home.fh .hst span {
  border-image-slice: 0 63 fill;
  border-image-width: 0 calc(var(--mh) * 0.0445);
}
#hud.fg .topbar .pill {
  border-image-slice: 0 63 fill;
  border-image-width: 0 calc(var(--mh) * 0.024);
}
#hud.fgl .pill {
  border-image-slice: 0 63 fill;
  border-image-width: 0 calc(var(--mh) * 0.04);
}
.tut.tutf .tutbadge {
  border-image-slice: 0 63 fill;
  border-image-width: 0 calc(var(--mh) * 0.021);
}
.modal.pz .card.stcard > .stlang .langsel {
  border-image-slice: 0 63 fill;
  border-image-width: 0 calc(var(--mh) * 0.019);
}
#levels.fl .btn.tab {
  border-image-slice: 0 63 fill;
  border-image-width: 0 calc(var(--mh) * 0.046);
}
#levels.fl .btn.tab.on {
  border-image-slice: 0 76 fill;
  border-image-width: 0 calc(var(--mh) * 0.046);
}
.card.win.fw .winrow .btn.green {
  border-image-slice: 0 76 fill;
  border-image-width: 0 calc(var(--mh) * 0.048);
}
.modal.wl .card.wlcard .btn.green {
  border-image-slice: 0 76 fill;
  border-image-width: 0 calc(var(--mh) * 0.068);
}
.modal.pz .card.pzcard > .btn.green {
  border-image-slice: 0 76 fill;
  border-image-width: 0 calc(var(--mh) * 0.05);
}
.modal.pzl .card.pzcard > .btn.green {
  border-image-slice: 0 76 fill;
  border-image-width: 0 calc(var(--mh) * 0.066);
}
.tut.tutf .btn.tutgo {
  border-image-slice: 0 76 fill;
  border-image-width: 0 calc(var(--mh) * 0.052);
}
body.land #home.fh .hplay {
  border-image-slice: 0 76 fill;
  border-image-width: 0 calc(var(--mh) * 0.12);
}

/* ---- fases deitado: fundo limpo do mockup (cartões e cenas já desenhados) e recortes do lote 6 ---- */
/* as cenas dos painéis são recortes do fundo do mockup (dentro da moldura); o fundo da tela fica no body */
#levels.fld .worlds .world {
  border-image: none;
}
#levels.fld > .plate {
  border-image: url(../assets/ui/dei-placa.webp) 0 22% fill / 0 calc(var(--mh) * 0.08);
  text-transform: uppercase;
}
#levels.fld .lhead > .btn:first-child {
  background: url(../assets/ui/dei-home.webp) center / contain no-repeat;
}
#levels.fld .lhead .lgear {
  background: url(../assets/ui/dei-gear.webp) center / contain no-repeat;
}
#levels.fld .lhead > .btn:first-child > *,
#levels.fld .lhead .lgear > * {
  visibility: hidden;
}

/* ---- rodada 14: fundos limpos do mockup (lote 7) ---- */
body.tutoring:not(.land) {
  background-image: url(../assets/tutorial-retrato.webp);
}
.modal.full .card.win.fw {
  background: url(../assets/vitoria-retrato.webp) center / cover no-repeat;
}
.card.win.fw .rays,
.card.win.fw .wmoitas,
.modal.full .card.win.fw::after {
  display: none;
}

/* rodada 15: a arte hud-faixa2 saiu fina; a placa das fases (mesmo desenho, espessura certa) serve à faixa */
#hud.fg .ribbon {
  border-image-source: url(../assets/ui/fases-faixa.webp);
  border-image-width: 0 calc(var(--mh) * 0.036);
}
#hud.fg .ribbon span::before,
#hud.fg .ribbon span::after,
.ribbon span::before,
.ribbon span::after {
  display: none;
  content: none;
}

/* rodada 16 */
#hud.fg .btn.boost .badge {
  min-width: calc(var(--mw) * 0.086);
  height: calc(var(--mw) * 0.086);
  font-size: calc(var(--mh) * 0.034);
  background: radial-gradient(circle at 40% 35%, #6cd25a, #48b93c 70%);
}
#levels.fl .path .btn.node .st svg {
  width: calc(var(--mw) * 0.042);
  height: calc(var(--mw) * 0.042);
}
#levels.fl .path .btn.node .st svg path {
  stroke-width: 1.3;
}
.modal.pz:not(.pzl) .card.pzcard > .pillbtn {
  padding-left: 30%;
  font-size: calc(var(--mh) * 0.024);
}

#levels.fl .path .btn.node {
  background: url(../assets/ui/botao-fase.webp) center / 100% 100% no-repeat;
}
.card.win.fw .winrow .btn.round:last-child {
  background-image: url(../assets/ui/botao-replay.webp);
}
.card.win.fw .winrow .btn.round:last-child svg {
  visibility: hidden;
}
.card.win.fw img.confetti.fixo {
  object-fit: fill;
  pointer-events: none;
  animation: balanca 2.4s ease-in-out infinite;
  --r: 0deg;
}

/* rodada 16: botões de fase e abas na proporção da arte */
#levels.fl .path .btn.node {
  height: 12.7%; /* da camada do mapa (= 0,1505 da largura do mockup quando o mapa tem o tamanho do mockup) */
}
#levels.fl .btn.tab:first-child {
  height: calc(var(--mw) * 0.1734);
}
#levels.fl .btn.tab:last-child {
  height: calc(var(--mw) * 0.1735);
}
#levels.fl .tabs {
  align-items: center;
}

/* rodada 17: correções das críticas */
#hud.fg .btn.boost .badge {
  min-width: calc(var(--mw) * 0.066);
  height: calc(var(--mw) * 0.066);
  font-size: calc(var(--mh) * 0.028);
}
.modal.pz:not(.pzl) .card.pzcard > .pillbtn {
  background-size: contain;
}
.modal.pz .card.pzcard {
  border-image-slice: 160 fill;
  border-image-width: calc(var(--mw) * 0.12);
}
.modal.pz .card.stcard > .plate {
  color: #4a2410;
  -webkit-text-stroke: 0;
}
#levels.fl .btn.tab:first-child.on,
#levels.fl .btn.tab:last-child:not(.on) {
  padding-left: 42%;
}
.tut.tutf .tutbox {
  display: flex;
  align-items: center;
  gap: 2%;
}
.tut.tutf .tutbox .tutowl {
  height: 100%;
  width: 40%;
}
.tut.tutf .tutbox .tutowl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tut.tutf .tutbox .bubble {
  flex: 1;
  max-width: none;
  height: 84%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--mh) * 0.03);
}
.card.win.fw h2 {
  font-size: calc(var(--mh) * 0.082);
}
.card.win.fw h2 .w1 {
  font-size: calc(var(--mh) * 0.07);
}

/* tutorial: o texto fica no alto da placa, acima do selo Level 1 (mockup) */
.tut.tutf .tutplate {
  align-items: flex-start;
  padding-top: calc(var(--mh) * 0.004);
  font-size: calc(var(--mh) * 0.042);
}

body.land #home.fh .hplay {
  padding-left: 27%;
  font-size: calc(var(--mh) * 0.11);
  overflow: hidden;
}

/* rodada 18: lote 9 */
.modal.wl .card.wlcard .thumb {
  border: calc(var(--mw) * 0.008) solid transparent;
  border-image: url(../assets/ui/moldura-mini-dei.webp) 70 / calc(var(--mw) * 0.012);
  border-radius: calc(var(--mw) * 0.012);
  box-shadow: none;
}

/* títulos da vitória em arco (SVG) */
.card.win h2.arcotitulo {
  -webkit-text-stroke: 0;
  text-shadow: none;
  line-height: 0;
}
.card.win h2.arcotitulo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 calc(var(--mh) * 0.005) 0 #3a2416);
}

/* pausa deitado (mockup telas-e-2): título creme com contorno, Levels/Restart em pílula creme, borda branca */
.modal.pzl .card.pzcard {
  box-shadow:
    0 0 0 calc(var(--mh) * 0.008) #fff,
    0 0 0 calc(var(--mh) * 0.011) var(--ink);
  border-radius: calc(var(--mh) * 0.05);
}
.modal.pzl .card.pzcard > .plate {
  color: #fff6dc;
  -webkit-text-stroke: calc(var(--mh) * 0.006) var(--ink);
  paint-order: stroke fill;
}
.modal.pzl .card.pzcard > .pillbtn {
  background: none;
  box-shadow: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 0 63 fill / 0 calc(var(--mh) * 0.046);
  color: var(--ink);
  gap: 8%;
}
.modal.pzl .card.pzcard > .pillbtn svg {
  width: auto;
  height: 55%;
}
.modal.pzl .card.pzcard > .pillbtn svg path,
.modal.pzl .card.pzcard > .pillbtn svg circle {
  stroke: #8a4fd6;
}

/* rodada 20: textos da pausa logo depois do ícone (mockup: 43% do botão); triângulo do seletor de idioma */
.modal.pz:not(.pzl) .card.pzcard > .pillbtn {
  padding-left: 42%;
  padding-right: 2%;
  font-size: calc(var(--mh) * 0.022);
}
.modal.pz .card.stcard > .stlang .langsel {
  padding-right: 14%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 1h10L6 9z' fill='%234a2410'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9% center;
  background-size: auto 34%;
}

/* início deitado: texto do Play na caixa do mockup (x79 w15 → 41,6% a 90,3% do botão) */
body.land #home.fh .hplay {
  padding-left: 0;
}
body.land #home.fh .hplay span {
  position: absolute;
  left: 41.6%;
  width: 48.7%;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--mh) * 0.105);
}

/* ajuda do meio (lâmpada) no mesmo estilo das outras duas, gerada na arte com elas de referência */
#hud.fg .btn.boost.hint,
#hud.fgl .btn.boost.hint {
  background-image: url(../assets/ui/ajuda-lampada.webp);
}
#hud.fg .btn.boost.hint > img,
#hud.fgl .btn.boost.hint > img {
  visibility: hidden;
}

/* rodada 20: correções na tela de fases e no tutorial */
#levels.fl .btn.tab:first-child.on img,
#levels.fl .btn.tab:last-child:not(.on) img {
  display: none;
}
#levels.fl .btn.tab:first-child.on,
#levels.fl .btn.tab:last-child:not(.on) {
  padding-left: 46%;
  justify-content: flex-start;
}
.tut.tutf .tutplate {
  border-image-source: url(../assets/ui/fases-faixa.webp);
  border-image-width: 0 calc(var(--mh) * 0.045);
  padding-top: 0;
  line-height: 1.15;
  font-size: calc(var(--mh) * 0.038);
}

#levels.fl .btn.tab:first-child.on,
#levels.fl .btn.tab:last-child:not(.on) {
  padding-left: calc(var(--mw) * 0.2);
}
.tut.tutf .tutplate {
  font-size: calc(var(--mh) * 0.034);
}

#levels.fl .btn.tab:first-child.on {
  padding-left: calc(var(--mw) * 0.256);
}
#levels.fl .btn.tab:last-child:not(.on) {
  padding-left: calc(var(--mw) * 0.231);
}

/* risquinhos do mockup (lote 10): a arte é do lado esquerdo; o lado direito é espelhado */
body:not(.land) #home.fh .hbrilho.b1 {
  transform: none;
}
body:not(.land) #home.fh .hbrilho.b2,
.card.win.fw .wbrilho.t2,
.card.win.fw .wbrilho.s2 {
  transform: scaleX(-1);
}
.card.win.fw .wbrilho.t1,
.card.win.fw .wbrilho.s1 {
  transform: none;
}

/* End of css/game.css */

/* rodada 22: pílula do idioma com a altura do mockup (3,8% dentro da linha de 4,3%) */
.modal.pz .card.stcard > .stlang .langsel {
  height: 88.4%;
  align-self: center;
}

/* rodada 22: padding em % pegava a largura da janela (142 px num botão de 89): texto começa a 12,5% do mockup
   depois da borda do botão, como no inventário (texto-levels x30,5 − botão x17,5) */
.modal.pz:not(.pzl) .card.pzcard > .pillbtn {
  padding-left: calc(var(--mw) * 0.125);
  padding-right: 0;
}
.modal.pz .card.stcard > .stlang .langtri {
  position: absolute;
  right: 4.5%;
  top: 50%;
  width: 6%;
  height: 34%;
  transform: translateY(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 1h10L6 9z' fill='%234a2410'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* rodada 22: pausa deitada com os risquinhos do mockup (arte desenhada para a esquerda: espelha a direita) */
.modal.pz .pzbrilho.raio.e {
  transform: none;
}
.modal.pz .pzbrilho.raio.d {
  transform: scaleX(-1);
}
.modal.pz .pzbrilho.raio {
  object-fit: contain;
}
/* coruja da pausa deitada atrás da janela (no mockup ela espia por trás da placa) */
.modal.pzl .peek.pzowl {
  z-index: 0;
}
.modal.pzl .card.pzcard {
  z-index: 1;
}
.modal.pzl .card.pzcard > .pillbtn img.pzic {
  height: 52%;
  width: auto;
}
.modal.pzl .card.pzcard > .pillbtn img.pzic.rs {
  height: 60%;
}
.modal.pzl .pzbrilho {
  z-index: 2;
}

/* rodada 22: fases deitado com estrelas cheias e grandes numa linha, encostadas, como no mockup (≈35% do botão cada) */
#levels.fld .strip .btn.node .st {
  flex-wrap: nowrap;
  gap: 0;
}
#levels.fld .strip .btn.node .st svg {
  width: 0.62em;
  height: 0.62em;
  margin: 0 -0.07em;
}
#levels.fld .strip .btn.node .st svg path {
  stroke-width: 2.2;
}

/* rodada 22: miniaturas da vitória em pé com a moldura dourada grossa do mockup (a arte, vit-moldura-retrato) */
.card.win.fw .thumb {
  border: calc(var(--mw) * 0.03) solid transparent; /* a cena fica dentro da madeira; a moldura passa um pouco por cima */
  border-image: url(../assets/ui/vit-moldura-retrato.webp) 112 / calc(var(--mw) * 0.044);
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}

/* rodada 22: mão desenhada do mockup (13,5% da largura em pé); a ponta do dedo (22% da largura, topo) fica no ponto */
.handwrap {
  width: calc(78 * var(--u));
}
.tut.tutf .handwrap {
  width: calc(var(--mw) * 0.135);
}
.handwrap img {
  display: block;
  width: 100%;
  margin-left: -22%;
  margin-top: -1%;
}
/* placa "Tutorial" grossa do mockup: pontas fixas, só o miolo estica */
.tut.tutf .tutplate {
  border-image: url(../assets/ui/tut-placa.webp) 0 362 fill / 0 calc(var(--mh) * 0.0345);
}
.tut.tutf .tutraio {
  object-fit: contain;
  pointer-events: none;
}
.tut.tutf .tutraio.d {
  transform: scaleX(-1);
}
.tut.tutf .tutplate {
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(var(--mh) * 0.003); /* texto de 11,7% a 15,5%: metade de cima da placa, acima do selo Level 1 */
}
.tut.tutf .tutplate {
  font-size: calc(var(--mh) * 0.046);
  line-height: 1;
}

/* rodada 22: fases deitado com a placa LEVEL SELECT grossa e a moldura laranja dos painéis (lote 14, a arte) */
#levels.fld > .plate {
  border-image: url(../assets/ui/dei-placa-ls.webp) 0 170 fill / 0 calc(var(--mh) * 0.057);
}
#levels.fld .worlds .world {
  border-image: url(../assets/ui/dei-painel.webp) 130 / calc(var(--mw) * 0.044) !important;
}
#levels.fld .lvraio {
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
#levels.fld .lvraio.d {
  transform: scaleX(-1);
}

/* ---- tela larga: um fundo único e largo no body (cobre a janela, sem emenda) e o jogo num palco central ----
   Fundos deitados = original no meio + asas da arte (lote 15). O palco: LAYOUT.maxAr, --ox = sobra de cada lado. */
body.land {
  background: #9fdc6a url(../assets/larga-pagina.webp) center / cover no-repeat;
}
body.land[data-scene='home'] {
  background-image: url(../assets/larga-home-centro.webp); /* composição do em pé: meio livre */
}
body.land #home.fh,
body.land #levels.fld {
  background: none;
}
#ui {
  left: var(--ox, 0px);
  right: var(--ox, 0px);
}
body.wide .modal {
  box-shadow: 0 0 0 100vw rgba(40, 26, 16, 0.66); /* a janela escurece também fora do palco */
}
/* tutorial deitado (sem mockup próprio): o voltar ia em cima do logo do placar; o canto de baixo fica livre */
body.land .btn.tutback {
  top: auto;
  bottom: calc(14 * var(--u) + var(--sab));
}
/* a peça fica na caixa da coruja (44,6/5,3/16,6/19,5); a arte com as folhas (35,5/3,5/30,5/22,6) transborda */
.modal.pzl .peek.pzowl img {
  position: absolute;
  left: -54.8%;
  top: -9.2%;
  width: 183.7%;
  height: 115.9%;
  max-width: none;
  max-height: none;
  object-fit: fill;
}

/* tutorial: a camada deixa o toque passar para as cenas (tocar na diferença é o que o balão pede); só os botões pegam */
#ui > .tut {
  pointer-events: none;
}
#ui > .tut .btn {
  pointer-events: auto;
}
/* tutorial deitado: o placar já mostra "Level 1"; o selo do mockup em pé caía para fora da tela */
body.land .tut .tutbadge {
  display: none;
}

/* tutorial: holofote na diferença (sem anel nem brilhos por cima); o resto da tela escurece */
#ui > .tut {
  background: none;
}
#ui > .tut .tutspot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#ui > .tut .tuthit {
  position: absolute;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}

/* início em pé: a face verde clara do botão vai de 7% a 84% da arte (centro em 45%); o texto sobe junto */
body:not(.land) #home.fh .hplay span {
  display: inline-block;
  transform: translateY(-10%);
}

/* placa de madeira dos Ajustes e da Pausa em pé (aj-placa): pontas fixas, título em arco por SVG */
.modal.pz .card.pzcard > .plate.wood.plate.wood {
  background: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/aj-placa.webp) 0 271 fill / 0 calc(var(--mh) * 0.034);
  padding: 0;
  overflow: visible;
  z-index: 2;
}
.modal.pz .card.pzcard > .plate.wood svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* a coruja fica na frente da placa: as patinhas (corte reto da arte) apoiam na madeira, como no mockup */
.modal.pz:not(.pzl) .peek {
  z-index: 2;
}
.modal.pz:not(.pzl) .card.pzcard {
  z-index: 1;
}
.modal.pz .pzbrilho.raio {
  z-index: 3;
  object-fit: contain;
}
.modal.pz .pzbrilho.raio.e {
  transform: none;
}
.modal.pz .pzbrilho.raio.d {
  transform: scaleX(-1);
}
/* pausa em pé: o texto termina dentro do desenho da pílula (a caixa é mais larga que a arte); se não couber, encolhe */
.modal.pz:not(.pzl) .card.pzcard > .pillbtn {
  padding-right: calc(var(--mw) * 0.035);
}

/* varredura 07/11: "Português" cortava no seletor de idioma; letra um pouco menor e menos folga à esquerda */
.modal.pz .card.stcard > .stlang .langsel {
  font-size: 0.78em;
  padding-left: 3%;
  padding-right: 15%;
}
/* Ajustes deitado com o layout do em pé: sem a margem e o limite de altura do layout antigo */
body.land .modal.pz .card.settings.stcard {
  margin: 0;
  max-height: none;
}

/* varredura 07/11: barra de volume com área de toque de 36 px; a trilha é desenhada por dentro (mesma aparência) */
input.vol {
  height: max(36px, calc(36 * var(--u)));
  background: transparent;
  border: 0;
  border-radius: 0;
}
input.vol::-webkit-slider-runnable-track {
  height: calc(18 * var(--u));
  border-radius: 99px;
  border: calc(2.5 * var(--u)) solid var(--ink);
  background: linear-gradient(90deg, #7ad94f var(--p, 50%), #f1e2c4 var(--p, 50%));
}
input.vol::-moz-range-track {
  height: calc(13 * var(--u));
  border-radius: 99px;
  border: calc(2.5 * var(--u)) solid var(--ink);
  background: linear-gradient(90deg, #7ad94f var(--p, 50%), #f1e2c4 var(--p, 50%));
}
input.vol::-webkit-slider-thumb {
  margin-top: calc(-8.5 * var(--u)); /* centrada na trilha: (18 − 2×2,5 − 30) / 2 */
}

/* tutorial deitado: balão mais largo (o texto cabia só em 4 linhas) */
body.land .tut .tutbox .bubble {
  max-width: 72%;
  font-size: calc(17 * var(--u));
}

/* vitória em pé no tablet: as miniaturas ficam juntas no meio, não coladas nas bordas */
.card.win.fw .thumbs {
  justify-content: center;
  gap: 2.5%;
}

/* varredura 07/11: sem estrelinhas de texto (✦) nas placas e faixas: atrapalhavam a leitura e são "ícone de texto";
   o brilho das placas é a arte dos risquinhos */
.plate span::before,
.plate span::after,
.ribbon span::before,
.ribbon span::after {
  content: none;
}

/* fases deitado (pedido do autor: "muito agrupado e feio"): duas fileiras de 5, botões maiores e espaçados,
   estrelas desenhadas da vitória */
#levels.fld .worlds .strip {
  top: 55%;
  height: 40%;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5% 2.4%;
  padding: 2.2% 3%;
  border-radius: calc(var(--mh) * 0.03);
}
#levels.fld .strip .btn.node {
  height: 100%;
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  font-size: calc(var(--mh) * 0.042);
  border-radius: calc(var(--mh) * 0.018);
}
#levels.fld .strip .btn.node b {
  line-height: 1;
}
#levels.fld .strip .btn.node .st {
  display: flex;
  gap: 2%;
  justify-content: center;
}
#levels.fld .strip .btn.node .st img.sti {
  width: 0.62em;
  height: auto;
  margin: 0;
}
#levels.fld .strip .btn.node .st img.sti.off {
  filter: grayscale(1) brightness(1.25) opacity(0.55);
}
#levels.fld .strip .btn.node .lock svg {
  width: 0.7em;
  height: 0.7em;
}
#levels.fld .strip .btn.node.locked b {
  color: #9b8b74;
}

/* cadeado desenhado (lote 18) no lugar do SVG */
.btn.node .lock img {
  display: block;
  height: 1em;
  width: auto;
}
#levels.fl .path .btn.node .lock img {
  height: 0.62em;
}
#levels.fld .strip .btn.node .lock img {
  height: 0.62em;
}
/* botão de fase em pé sem esticar: a arte (600×541) cabe inteira na caixa */
#levels.fl .path .btn.node {
  background-size: contain;
}
/* fases deitado: número e estrelas maiores */
#levels.fld .strip .btn.node {
  font-size: calc(var(--mh) * 0.054);
}

/* vitória (pedido do autor): raios girando devagar atrás da coruja e das estrelas, somem nas bordas */
.modal.wl .card.wlcard .rays,
.card.win.fw .rays {
  display: block;
  position: absolute;
  z-index: 0;
  inset: -40%;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg at 50% 50%,
    rgba(255, 255, 255, 0.38) 0deg 8deg,
    rgba(255, 255, 255, 0) 8deg 20deg
  );
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 22%, transparent 55%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 22%, transparent 55%);
  animation: spin 40s linear infinite;
}
.modal.wl .card.wlcard .rays {
  top: -40%;
  bottom: -20%; /* centro dos raios na altura da coruja */
}
.card.win.fw .rays {
  top: -22%;
  bottom: -40%;
  opacity: 0.6; /* o fundo em pé já tem raios desenhados */
}
@media (prefers-reduced-motion: reduce) {
  .modal.wl .card.wlcard .rays,
  .card.win.fw .rays {
    animation: none;
  }
}

/* botões verdes com base 3D na arte: o texto sobe para o meio da face clara (como o Jogar) */
.modal.wl .card.wlcard .btn.green.big,
.card.win.fw .winrow .btn.green.big,
.modal.pz .card.pzcard > .btn.green.big,
.tut .btn.green.big.tutgo {
  padding-top: 0;
  padding-bottom: 0.14em;
  line-height: 1;
}

/* menu inicial vivo (pedido do autor) */
#home.fh .bicho {
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: respira 3.4s ease-in-out infinite alternate;
}
@keyframes respira {
  from {
    transform: scale(1.01, 1.01);
  }
  to {
    transform: scale(1.035, 1.05);
  }
}
#home.fh .owlbig .palpebra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
}
#home.fh .owlbig .palpebra.on {
  opacity: 1;
}
#home.fh .owlbig.flutua {
  animation: flutua 3.2s ease-in-out infinite;
}
@keyframes flutua {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.2%);
  }
}
#home.fh .folhas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
#home.fh .folhas .folha {
  position: absolute;
  top: -8%;
  height: auto;
  animation:
    cai 12s linear infinite,
    balanca 2.8s ease-in-out infinite alternate;
}
@keyframes cai {
  to {
    top: 108%;
  }
}
@keyframes balanca {
  from {
    transform: translateX(-60%) rotate(-25deg);
  }
  to {
    transform: translateX(60%) rotate(30deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #home.fh .bicho,
  #home.fh .owlbig.flutua {
    animation: none;
  }
}
/* nas janelas, a área de toque da barra de volume é a altura da própria linha (não invade a linha de baixo) */
.modal.pz .card.pzcard > .set input.vol {
  height: 100%;
  min-height: 0;
}

/* última fase: faixa creme legível com a frase "Você achou tudo!" */
.card.win .alldone {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  padding: 0 3%;
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink);
  background: #fff6e3;
  border: calc(var(--mh) * 0.0035) solid var(--ink);
  border-radius: 99px;
  box-shadow: 0 calc(var(--mh) * 0.004) 0 rgba(58, 36, 22, 0.35);
  font-size: calc(var(--mh) * 0.022);
}
.modal.wl .card.wlcard .alldone {
  font-size: calc(var(--mh) * 0.03);
}

/* início em pé: o fundo é uma peça com a proporção da arte, cobrindo a tela (como background cover); os bichinhos
   ficam dentro dela em % da imagem */
body:not(.land) #home.fh {
  background: none;
}
#home.fh .homebg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * 941 / 1672);
  height: max(100cqh, 100cqw * 1672 / 941);
  transform: translate(-50%, -50%);
  background: url(../assets/home-retrato.webp) center / 100% 100% no-repeat;
  pointer-events: none;
}
#home.fh .homebg .bicho {
  position: absolute;
}

/* OK dos Ajustes e Play do início deitado: a arte do botão inteira, sem esticar e sem o verde liso por trás
   (que vazava do contorno) — o mesmo desenho do Next */
.modal.pz .card.pzcard > .btn.green.big,
body.land #home.fh .hplay {
  border: 0 solid transparent;
  border-image: none;
  background: url(../assets/ui/btn-verde.webp) center / contain no-repeat;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* vitória sem a comparação das cenas (pedido do autor) */
.card.win canvas.thumb {
  display: none;
}
/* pausa deitada: ícone e texto juntos no meio da pílula, com folga das bordas */
.modal.pzl .card.pzcard > .pillbtn {
  justify-content: center;
  gap: calc(var(--mh) * 0.014);
  padding: 0 calc(var(--mh) * 0.03); /* em % pegava a largura da janela */
}
.modal.pzl .card.pzcard > .pillbtn img.pzic {
  flex: 0 0 auto;
}

/* botões verdes grandes das janelas: o mesmo recurso do Next — pontas fixas, só o miolo estica na horizontal, sem
   verde liso por trás. A largura da ponta é metade da altura do botão (arte 330×153, ponta 76) */
.modal.pz .card.pzcard > .btn.green.big {
  background: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/btn-verde.webp) 0 76 fill / 0 calc(var(--mh) * 0.0497);
}
.modal.pz .card.stcard > .btn.green.big {
  border-image-width: 0 calc(var(--mh) * 0.0318);
}
body.land .modal.pz .card.pause.pzcard {
  margin: 0;
  max-height: none;
}

/* início deitado com o visual do em pé (classe fhp): sem painel de madeira, Play e botões redondos do em pé */
body.land #home.fh.fhp .hplay {
  border: 0 solid transparent;
  border-image: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: url(../assets/ui/play-retrato.webp) center / contain no-repeat;
  background-color: transparent;
  font-size: calc(var(--mh) * 0.125);
  overflow: visible;
}
body.land #home.fh.fhp .hplay span {
  position: static;
  width: auto;
  display: inline-block;
  transform: translateY(-10%);
  white-space: nowrap;
}
body.land #home.fh.fhp .hlv {
  background:
    url(../assets/ui/ic-levels-retrato.webp) center 36% / 58% no-repeat,
    url(../assets/ui/btn-creme.webp) center / contain no-repeat;
}
body.land #home.fh.fhp .hst {
  background:
    url(../assets/icon-ajustes.webp) center 40% / 56% no-repeat,
    url(../assets/ui/btn-creme.webp) center / contain no-repeat;
}
body.land #home.fh.fhp .hlv span,
body.land #home.fh.fhp .hst span {
  left: -10.6%;
  top: 67%;
  width: 121%;
  height: 35.7%;
  border-image-width: 0 calc(var(--mh) * 0.045);
  font-size: calc(var(--mh) * 0.05);
}
body.land #home.fh.fhp .hbrilho.b1 {
  transform: none;
}
body.land #home.fh.fhp .hbrilho.b2 {
  transform: scaleX(-1);
}

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