/* fases deitado: a cena (recorte sem a moldura e sem a fileira desenhadas) ocupa o alto do painel; a fileira de
   botões é opaca e fica embaixo, cobrindo o mínimo da cena */
#levels.fld .worlds .world:nth-child(1),
#levels.fld .worlds .world:nth-child(2) {
  background-size: 100% auto !important;
  background-position: center top !important;
  background-color: #fff6e3 !important;
}
#levels.fld .worlds .strip {
  top: 61%;
  height: 36%;
  background: #fff6e3;
  gap: 6% 2.4%;
}

/* faixa Park/Beach (pedido do autor: legível em qualquer idioma) */
#levels.fld .worlds .world > .plate.wfaixa {
  left: 50%;
  width: auto;
  min-width: 34%;
  max-width: 92%;
  transform: translateX(-50%);
  gap: 0.25em;
  padding: 0 calc(var(--mh) * 0.1);
  border: 0 solid transparent;
  border-image: url(../assets/ui/faixa-lisa.webp) 0 600 fill / 0 calc(var(--mh) * 0.1);
  background: none;
  white-space: nowrap;
  font-size: calc(var(--mh) * 0.05);
}
#levels.fld .worlds .world > .plate.wfaixa .wfic {
  height: 1.05em;
  width: auto;
  flex: 0 0 auto;
}

/* vitória: confete caindo (pedaços coloridos com contorno, girando) */
.card.win .confete {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.card.win .confete i {
  position: absolute;
  top: -6%;
  width: 2.6%;
  aspect-ratio: 0.55;
  border-radius: 30%;
  border: 2px solid #3a2416;
  animation:
    confete-cai 4s linear infinite,
    confete-gira 1.2s linear infinite;
}
@keyframes confete-cai {
  to {
    top: 106%;
  }
}
@keyframes confete-gira {
  to {
    transform: rotate(360deg) rotateY(180deg);
  }
}

/* fase trancada: treme ao toque */
.btn.node.nope {
  animation: nope 0.32s ease-in-out;
}
@keyframes nope {
  20%,
  60% {
    transform: translateX(-6%);
  }
  40%,
  80% {
    transform: translateX(6%);
  }
}
#levels.fl .path .btn.node.nope {
  animation: nope-c 0.32s ease-in-out;
}
@keyframes nope-c {
  20%,
  60% {
    transform: translate(-56%, -50%);
  }
  40%,
  80% {
    transform: translate(-44%, -50%);
  }
}
/* tutorial: a barra de ajudas some (aparecia atrás do Começar) */
body.tutoring #hud .boosts,
body.tutoring #hud .bbar {
  visibility: hidden;
}
/* faixa do placar: o texto encolhe sem cortar */
#hud .ribbon span {
  overflow: visible;
  text-overflow: clip;
}

/* início deitado: bichinhos soltos — o pintinho pula, os outros respiram */
#home.fh .bicho.solto.pintinho {
  animation-name: pulinho;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
}
@keyframes pulinho {
  0%,
  55%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  65% {
    transform: translateY(2%) scale(1.06, 0.94);
  }
  80% {
    transform: translateY(-18%) scale(0.96, 1.05);
  }
}
/* tutorial deitado: o Começar mantém a altura de botão (o ajuste do texto tinha tirado) */
body.land .tut .btn.green.big.tutgo {
  min-height: max(44px, calc(52 * var(--u)));
  padding: 0 calc(28 * var(--u)) 0.14em;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* fases em pé: o mapa acompanha a curva interna da madeira (antes o canto vazava na borda) */
#levels.fl .world.map {
  border-radius: calc(var(--mw) * 0.06);
  overflow: hidden;
}

/* fases deitado: a cena acompanha a curva da moldura (o canto quadrado vazava por fora da madeira) */
#levels.fld .worlds .world {
  border-radius: calc(var(--mw) * 0.05);
}

/* engrenagem da partida (canto de cima à direita): botão redondo amarelo desenhado */
#hud .btn.hudgear {
  background: url(../assets/ui/dei-gear.webp) center / contain no-repeat;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 50%;
  aspect-ratio: auto;
}
/* menu da partida: linha do idioma (ícone, nome, seletor em pílula) */
.modal.pz .card.pzcard > .stlang {
  display: flex;
  align-items: center;
  gap: 3%;
  padding: 0 2%;
  background: none;
  font-size: calc(var(--mh) * 0.024);
  font-weight: 700;
  color: var(--ink);
}
.modal.pz .card.pzcard > .stlang .ico {
  height: 80%;
  width: auto;
}
.modal.pz .card.pzcard > .stlang span {
  white-space: nowrap;
}
.modal.pz .card.pzcard > .stlang .langsel {
  margin-left: auto;
  width: 50%;
  height: 88%;
  align-self: center;
  appearance: none;
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 0 63 fill / 0 calc(var(--mh) * 0.022);
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.86em;
  color: var(--ink);
  text-align: center;
  padding: 0 15% 0 3%;
}
.modal.pz .card.pzcard > .stlang {
  position: absolute;
}
/* confirmação de recomeçar */
.modal.pz .card.cfcard > .cftext {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  color: var(--ink);
  font-size: calc(var(--mh) * 0.026);
}
.modal.pz .card.cfcard > .btn.green.big {
  border-image-width: 0 calc(var(--mh) * 0.035);
  font-size: calc(var(--mh) * 0.03);
}
.modal.pz .card.cfcard > .btn.cfno {
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 0 63 fill / 0 calc(var(--mh) * 0.035);
  background: none;
  box-shadow: none;
  font-size: calc(var(--mh) * 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.pz .card.pzcard > .stlang span {
  display: inline !important;
}
.modal.pz .card.pzcard > .stlang .ico {
  height: 90% !important;
  width: auto !important;
}

/* falta uma diferença: o placar fica dourado e pulsa devagar (pacote de juice, 07/11) */
.pill.cnt.lastone {
  background: linear-gradient(#fff6c2, #ffd54a);
  animation: lastone 1.4s ease-in-out infinite;
}
@keyframes lastone {
  50% {
    filter: drop-shadow(0 0 calc(7 * var(--u)) rgba(255, 206, 50, 0.95));
  }
}
@media (prefers-reduced-motion: reduce) {
  .pill.cnt.lastone {
    animation: none;
  }
}

/* placar deitado: estrelas brilhantes (arte da vitória), longe das pontas enroladas da pílula (08/11) */
#hud.fgl .pill.stars5 {
  gap: 4%;
  padding: 0 calc(var(--mh) * 0.045);
}
#hud.fgl .pill.stars5 .hstar {
  height: 62%;
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
  object-fit: contain;
  filter: drop-shadow(0 calc(1.5 * var(--u)) 0 rgba(58, 36, 22, 0.25));
}

/* rodada 24 (08/11): confete atrás do título, das estrelas e da coruja; mais fino */
.card.win > .rays {
  z-index: 0;
}
.card.win .confete {
  z-index: 1;
}
.card.win > *:not(.confete):not(.rays) {
  z-index: 2;
}
.card.win .confete i {
  width: 1.9%;
}
/* vitória deitada: Repetir e Início com os botões desenhados (antes um ícone fino em SVG) */
.modal.wl .card.wlcard .winrow .btn.round:last-child {
  background: url(../assets/ui/botao-replay.webp) center / contain no-repeat;
}
.modal.wl .card.wlcard .winrow .btn.round:last-child svg {
  visibility: hidden;
}

/* rodada 25 (08/11): mapa em pé ocupa a altura que sobrar; a camada da imagem + botões mantém a proporção do mockup
   (92,8 × 66,6% de 941 × 1672 = 0,7842) e cobre a caixa, cortando um pouco dos lados em celular comprido */
#levels.fl .world.map {
  background: none;
  overflow: hidden;
}
/* tamanho da caixa do mapa: largura 92,8% do mockup, altura até o pé da tela (mesmas contas do showLevels) */
#levels.fl .world.map .path {
  --bw: calc(var(--mw) * 0.928);
  --bh: min(100cqh - var(--mh) * 0.334, var(--mh) * 0.746);
  inset: auto;
  left: 50%;
  top: 50%;
  width: max(var(--bw), var(--bh) * 0.7842);
  height: max(var(--bh), var(--bw) / 0.7842);
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center;
}
/* rodada 25: no tutorial o escuro é só para as cenas; o logo do placar fica claro por cima do véu */
body.tutoring #hud .hudlogo {
  z-index: 16;
}
/* rodada 26: ajustes com os risquinhos amarelos dos dois lados do OK, como no mockup 08 */
.modal.pz .card.stcard > .btn.green .spk.a,
.modal.pz .card.stcard > .btn.green .spk.c {
  display: block;
  top: 18%;
}
.modal.pz .card.stcard > .btn.green .spk.a {
  left: -0.75em;
}
.modal.pz .card.stcard > .btn.green .spk.c {
  right: -0.75em;
  transform: scaleX(-1);
}

/* 5 mundos (08/11): seletor em pé (setas + aba do mundo + bolinhas) e painéis deitados por mundo */
#levels.fl .wsw {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2%;
}
#levels .btn.round.wprev,
#levels .btn.round.wnext {
  flex: 0 0 auto;
  aspect-ratio: 1;
  height: 78%;
  width: auto;
  padding: 0;
  display: grid;
  place-items: center;
}
#levels.fld .btn.round.wprev,
#levels.fld .btn.round.wnext {
  height: auto;
}
#levels .btn.round.wprev svg,
#levels .btn.round.wnext svg {
  width: 56%;
  height: 56%;
}
#levels .btn.round.wnext svg {
  transform: scaleX(-1);
}
#levels .btn.round:disabled {
  opacity: 0.4;
  filter: grayscale(0.6);
}
#levels.fl .wtab {
  flex: 1 1 auto;
  height: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7% 0 44%;
  background: center / contain no-repeat;
  font-family: var(--font);
  font-weight: 700;
  font-size: calc(var(--mh) * 0.042);
  color: var(--ink);
  white-space: nowrap;
}
#levels.fl .wtab[data-w='park'] {
  background-image: url(../assets/ui/aba-on-park.webp);
}
#levels.fl .wtab[data-w='beach'] {
  background-image: url(../assets/ui/aba-on-beach.webp);
}
#levels.fl .wtab[data-w='farm'] {
  background-image: url(../assets/ui/aba-on-farm.webp);
}
#levels.fl .wtab[data-w='snow'] {
  background-image: url(../assets/ui/aba-on-snow.webp);
}
#levels.fl .wtab[data-w='candy'] {
  background-image: url(../assets/ui/aba-on-candy.webp);
}
#levels.fl .wdots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4%;
}
#levels.fl .wdots i {
  height: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f3dfbd;
  border: calc(var(--mh) * 0.0018) solid var(--ink);
}
#levels.fl .wdots i.on {
  background: #ffd23a;
  transform: scale(1.35);
}
#levels.fld .worlds .world.farm {
  background: url(../assets/ui/cena-farm-dei.webp) center / 100% 100% no-repeat padding-box !important;
}
#levels.fld .worlds .world.snow {
  background: url(../assets/ui/cena-snow-dei.webp) center / 100% 100% no-repeat padding-box !important;
}
#levels.fld .worlds .world.candy {
  background: url(../assets/ui/cena-candy-dei.webp) center / 100% 100% no-repeat padding-box !important;
}

/* aba do mundo em 3 partes (o autor, 08/11): figura (0–39% da arte) e ponta com risquinhos (90–100%) fixas, o verde
   do meio estica até a largura toda; o nome fica centrado no verde e encolhe se precisar. Altura da aba = 9,2% do mockup */
#levels.fl .wtab {
  background: none !important;
  border: 0 solid transparent;
  border-image-slice: 0 10% 0 39% fill;
  border-image-width: 0 calc(var(--mh) * 0.0235) 0 calc(var(--mh) * 0.0918);
  border-image-repeat: stretch;
  padding: 0 calc(var(--mh) * 0.03) 0 calc(var(--mh) * 0.114);
}
#levels.fl .wtab[data-w='park'] {
  border-image-source: url(../assets/ui/aba-on-park.webp);
}
#levels.fl .wtab[data-w='beach'] {
  border-image-source: url(../assets/ui/aba-on-beach.webp);
}
#levels.fl .wtab[data-w='farm'] {
  border-image-source: url(../assets/ui/aba-on-farm.webp);
}
#levels.fl .wtab[data-w='snow'] {
  border-image-source: url(../assets/ui/aba-on-snow.webp);
}
#levels.fl .wtab[data-w='candy'] {
  border-image-source: url(../assets/ui/aba-on-candy.webp);
}
#levels.fl .wtab span {
  min-width: 0;
  overflow: visible;
}

/* coruja da vitória (pedido do autor, 08/11): entra com um pulo e depois comemora em pulinhos (squash até 6%),
   balançando, com brilhos piscando em volta. Com "menos movimento" fica parada. */
.card.win .owlwin.festa {
  transform-origin: 50% 100%;
  animation:
    owlentra 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) 0.15s both,
    owlfesta 1.25s ease-in-out 0.75s infinite;
}
@keyframes owlentra {
  from {
    transform: translateY(18%) scale(0.6);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@keyframes owlfesta {
  0%,
  100% {
    transform: translateY(0) scale(1, 1) rotate(0);
  }
  12% {
    transform: translateY(0) scale(1.06, 0.94) rotate(0);
  }
  40% {
    transform: translateY(-10%) scale(0.96, 1.04) rotate(-5deg);
  }
  58% {
    transform: translateY(-12%) scale(1, 1) rotate(4deg);
  }
  82% {
    transform: translateY(0) scale(1.05, 0.95) rotate(0);
  }
}
.card.win .owlwin .winbrilho {
  position: absolute;
  height: auto;
  pointer-events: none;
  opacity: 0;
  animation: winpisca 1.25s ease-in-out infinite;
}
@keyframes winpisca {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(0);
  }
  30% {
    opacity: 1;
    transform: scale(1.1) rotate(20deg);
  }
  60% {
    opacity: 0.8;
    transform: scale(0.9) rotate(35deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card.win .owlwin.festa,
  .card.win .owlwin .winbrilho {
    animation: none;
  }
}

/* modo de teste (?debug, só rede local): botão para passar a fase */
.dbgwin {
  position: fixed;
  left: calc(8px + env(safe-area-inset-left, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  pointer-events: auto;
  font: 700 14px var(--font);
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid #3a2416;
  background: #ff5fa2;
  color: #fff;
  opacity: 0.9;
}
/* rótulos Levels/Settings do início: folga nas pontas redondas da pílula (o encolhimento conta com ela) */
#home.fh .hlv span,
#home.fh .hst span {
  box-sizing: border-box;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
/* fases deitado: seta desabilitada some (antes um círculo cinza por cima da arte do mundo) */
#levels.fld .btn.round.wprev:disabled,
#levels.fld .btn.round.wnext:disabled {
  visibility: hidden;
}

/* fundo da partida por mundo (pedido do autor, 08/11; a arte lote 28/29): em pé e largo (miolo + asas emendadas) */
body[data-scene='game'][data-world='beach'] {
  background-image: url(../assets/pagina-retrato-praia.webp);
}
body.land[data-scene='game'][data-world='beach'] {
  background-image: url(../assets/larga-pagina-praia.webp);
}
body[data-scene='game'][data-world='farm'] {
  background-image: url(../assets/pagina-retrato-fazenda.webp);
}
body.land[data-scene='game'][data-world='farm'] {
  background-image: url(../assets/larga-pagina-fazenda.webp);
}
body[data-scene='game'][data-world='snow'] {
  background-image: url(../assets/pagina-retrato-neve.webp);
}
body.land[data-scene='game'][data-world='snow'] {
  background-image: url(../assets/larga-pagina-neve.webp);
}
body[data-scene='game'][data-world='candy'] {
  background-image: url(../assets/pagina-retrato-doces.webp);
}
body.land[data-scene='game'][data-world='candy'] {
  background-image: url(../assets/larga-pagina-doces.webp);
}

/* tutorial guiado da fase 1 (08/11): toque para continuar, pular, placar e ajudas aparecem nos passos deles */
#ui > .tut .tutcatch {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}
#ui > .tut .tutspot[hidden],
#ui > .tut .handwrap[hidden],
#ui > .tut .tutcatch[hidden] {
  display: none;
}
.tut .handwrap {
  transition:
    left 0.35s ease-in-out,
    top 0.35s ease-in-out;
}
.tut .bubble .tutcont {
  display: block;
  margin-top: 0.35em;
  font-size: 0.62em;
  font-weight: 600;
  opacity: 0.75;
  animation: tutpisca 1.4s ease-in-out infinite;
}
.tut .bubble .tutcont:empty {
  display: none;
}
@keyframes tutpisca {
  50% {
    opacity: 0.35;
  }
}
.tut .bubble {
  flex-direction: column;
  overflow: hidden;
}
.btn.tutskip {
  pointer-events: auto;
  font-size: calc(var(--mh, 900px) * 0.024);
  font-weight: 700;
  color: var(--ink);
  border: 0 solid transparent;
  border-image: url(../assets/ui/pilula-creme.webp) 0 63 fill / 0 calc(var(--mh, 900px) * 0.03);
  background: none;
  padding: 0 1em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
body.land .btn.tutskip {
  position: absolute;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(
    14px + env(safe-area-inset-bottom, 0px)
  ); /* canto de baixo, espelhando o Voltar (em cima fica o balão) */
  height: 44px;
  font-size: 18px;
  border-image-width: 0 22px;
  padding: 0 26px;
}
body.tutoring.tut-hud .ptop .topbar {
  visibility: visible;
}
body.tut-hud .tut .tutplate,
body.tut-hud .tut .tutbadge,
body.tut-hud .tut .tutraio:not(.rplay) {
  display: none;
}
body.tutoring.tut-boosts .boosts,
body.tutoring.tut-boosts #hud .boosts,
body.tutoring.tut-boosts #hud .bbar {
  visibility: visible;
}
body.tut-boosts .tut .btn.tutgo,
body.tut-boosts .tut .tutraio.rplay {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .tut .bubble .tutcont {
    animation: none;
  }
}
/* no tutorial a engrenagem some: "Pular" e "Voltar" ficam no lugar dela */
body.tutoring #hud .hudgear {
  visibility: hidden;
}

/* tudo que o tutorial esconde some de verdade (o botão verde tem display próprio) */
#ui > .tut [hidden] {
  display: none !important;
}
/* deitado: a placa "Tutorial" sai (a faixa de cima é da coruja e do balão) */
body.land .tut .tutplate,
body.land .tut .tutraio {
  display: none;
}
body.land .tut .tutbox {
  justify-content: center;
}
body.land .tut .tutbox .tutowl {
  height: 100%;
}
body.land .tut .tutbox .bubble {
  max-width: 62%;
  height: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* balão do tutorial: o rabicho da arte fica à esquerda; o texto começa depois dele e não é cortado */
.tut.tutf .tutbox .bubble {
  padding: 3% 6% 3% 13%;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.15;
}
body.land .tut .tutbox .bubble {
  padding: 2% 5% 2% 10%;
  box-sizing: border-box;
  line-height: 1.15;
}

/* tutorial, rodada 2 do crítico: mão que vem de cima perto do pé da tela; lâmpada e olho travados na vez da lupa;
   coruja menor no balão (mais espaço para a letra); "toque para continuar" legível */
.tut .handwrap.up img {
  transform: scaleY(-1);
}
body.tut-lupa #hud .boost.hint,
body.tut-lupa #hud .boost.eye {
  filter: grayscale(0.7) brightness(0.8);
}
.tut.tutf .tutbox .tutowl {
  width: 30%;
}
.tut .bubble .tutcont {
  font-size: max(12px, 0.7em);
}
body.land .tut .tutbox .bubble {
  max-width: 70%;
  font-size: max(15px, calc(19 * var(--u)));
}

/* balão mais largo em pé; "toque para continuar" = mãozinha no canto */
.tut.tutf .tutbox .tutowl {
  width: 25%;
}
.tut.tutf .tutbox .bubble {
  height: 100%;
  padding: 2.5% 6% 2.5% 11%;
}
body.land .tut .tutbox .bubble {
  max-width: 76%;
  padding-right: 7%;
}
.tut .bubble .tutcont.on {
  display: block;
  position: absolute;
  right: 3.5%;
  bottom: 9%;
  width: 1.5em;
  height: 1.5em;
  margin: 0;
  background: url(../assets/ui/tut-mao.webp) center / contain no-repeat;
  opacity: 1;
  animation: tutdedo 1.1s ease-in-out infinite;
}
@keyframes tutdedo {
  50% {
    transform: translateY(-18%) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tut .bubble .tutcont.on {
    animation: none;
  }
}

/* balão do tutorial em CSS: retângulo arredondado com rabicho pequeno (texto usa a largura toda) */
.tut .tutbox .bubble,
.tut.tutf .tutbox .bubble,
body.land .tut .tutbox .bubble {
  background: #fffaf0;
  border: calc(var(--u) * 3) solid #6b3f1d;
  border-radius: calc(var(--u) * 20);
  box-shadow: 0 calc(var(--u) * 4) 0 rgba(107, 63, 29, 0.35);
  padding: 2.5% 7% 2.5% 5%;
  box-sizing: border-box;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
  position: relative;
}
.tut .tutbox .bubble::before {
  display: block;
  content: '';
  position: absolute;
  left: calc(var(--u) * -11);
  top: 50%;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  background: #fffaf0;
  border-left: calc(var(--u) * 3) solid #6b3f1d;
  border-bottom: calc(var(--u) * 3) solid #6b3f1d;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 0 0 0 calc(var(--u) * 4);
}

.tut .handwrap {
  z-index: 20;
}
.tut.tutf .tutbox .bubble {
  padding-top: 1%;
  padding-bottom: 1%;
  line-height: 1.12;
}

/* fases deitado: um painel só, cena em proporção própria (cover, sem esticar), moldura de madeira, seta de cada lado */
#levels.fld .worlds .world {
  border: calc(var(--mw) * 0.018) solid transparent;
  border-image: url(../assets/ui/painel-madeira.webp) 90 / calc(var(--mw) * 0.022);
  background-size: cover !important;
  background-position: center 40% !important;
  background-repeat: no-repeat !important;
  border-radius: calc(var(--mw) * 0.02);
}
#levels.fld .worlds .world > .plate {
  left: 29%;
  width: 42%;
  border-image: url(../assets/ui/placa-creme.webp) 0 14% fill / 0 calc(var(--mh) * 0.044);
  background: none;
  padding-left: 0;
}
#levels.fld .wprev:disabled,
#levels.fld .wnext:disabled {
  opacity: 0.35;
}
/* o fundo da tela troca junto com o mundo da tela de fases */
body[data-scene='levels'][data-world='beach'] {
  background-image: url(../assets/pagina-retrato-praia.webp);
}
body.land[data-scene='levels'][data-world='beach'] {
  background-image: url(../assets/larga-pagina-praia.webp);
}
body[data-scene='levels'][data-world='farm'] {
  background-image: url(../assets/pagina-retrato-fazenda.webp);
}
body.land[data-scene='levels'][data-world='farm'] {
  background-image: url(../assets/larga-pagina-fazenda.webp);
}
body[data-scene='levels'][data-world='snow'] {
  background-image: url(../assets/pagina-retrato-neve.webp);
}
body.land[data-scene='levels'][data-world='snow'] {
  background-image: url(../assets/larga-pagina-neve.webp);
}
body[data-scene='levels'][data-world='candy'] {
  background-image: url(../assets/pagina-retrato-doces.webp);
}
body.land[data-scene='levels'][data-world='candy'] {
  background-image: url(../assets/larga-pagina-doces.webp);
}

/* transição entre telas: íris (a máscara é animada pelo JS) */
.veu {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: none;
  background: radial-gradient(circle at 50% 50%, #fff6dc 0%, #e6f3bf 45%, #9fd36c 100%);
}
.veu.on {
  display: block;
  pointer-events: auto;
}
.iris-flor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(32vmin, 220px);
  margin: calc(min(32vmin, 220px) / -2) 0 0 calc(min(32vmin, 220px) / -2);
  scale: 0;
  filter: drop-shadow(0 4px 0 rgba(90, 55, 20, 0.25));
}
.iris-anel {
  position: fixed;
  z-index: 9001;
  pointer-events: none;
  display: none;
  border-radius: 50%;
  box-sizing: border-box;
  border: 7px solid #fff4d2;
  box-shadow:
    0 0 0 3px #7a4a24,
    inset 0 0 0 3px #7a4a24,
    0 0 18px rgba(255, 230, 150, 0.6);
}
.iris-anel.on {
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .veu,
  .iris-anel {
    display: none !important;
  }
}

#levels.fld .lvowl {
  display: block;
  position: absolute;
}
#levels.fld .lvowl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* faixa do nome do mundo: caixa creme feita em CSS (o 3-fatias da imagem deixava um risco vertical) + folhinhas nas pontas */
#levels.fld .worlds .world > .plate {
  border: calc(var(--mh) * 0.006) solid #6b3f1d;
  border-image: none;
  background: linear-gradient(#fff6e2, #f6e6c4);
  border-radius: 999px;
  box-shadow: 0 calc(var(--mh) * 0.006) 0 rgba(107, 63, 29, 0.45);
  overflow: visible;
}
#levels.fld .peekowl[hidden] {
  display: none;
}
/* risco vertical da faixa do mundo: fresta de subpixel entre as fatias da imagem; um miolo creme por baixo tampa */
#levels.fld .worlds .world > .plate.wfaixa {
  background: linear-gradient(#fae8ca, #fae8ca) center / calc(100% - var(--mh) * 0.2 + 8px) 72% no-repeat;
  box-shadow: none;
  border-radius: 0;
}

/* toque para começar */
#tapstart {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vmin;
  background: none;
  cursor: pointer;
}
#tapstart .tslogo {
  width: min(70vmin, 520px);
  height: auto;
}
#tapstart .tsowl {
  width: min(34vmin, 260px);
  height: min(34vmin, 260px);
}
#tapstart .tsowl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#tapstart .tstext {
  font-size: max(20px, 4.4vmin);
  padding: 0.5em 1.4em;
  animation: tspulsa 1.3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tspulsa {
  50% {
    transform: scale(1.07);
  }
}
@media (prefers-reduced-motion: reduce) {
  #tapstart .tstext {
    animation: none;
  }
}
#tapstart {
  gap: 2.5vh;
}
#tapstart .tslogo {
  width: auto;
  max-width: 80vw;
  height: min(40vh, 300px);
  object-fit: contain;
}
#tapstart .tsowl {
  width: min(28vh, 220px);
  height: min(28vh, 220px);
}

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