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

@keyframes swipetrail {
  0%,
  20% {
    opacity: 0;
    transform: scaleX(0.2);
  }
  70% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}
.swipehand.still img,
.swipehand.still .trail {
  animation: none;
  opacity: 1;
}
/* mãozinhas (tutorial e arrastar) nunca por cima de janela aberta */
body.modal #hand,
body.modal #tapring,
body.modal .swipehand {
  display: none !important;
}
/* 7) selo do número de dicas em amarelo-escuro (verde fica só para "achado") */
#hint #hintN {
  background: linear-gradient(#ffd24a, #e6a00c) !important;
  color: var(--ink) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* 8) confete sempre atrás das janelas */
body:has(.win) #fx,
body:has(.win.wv) #fx,
body:has(.win.pv) #fx {
  z-index: 5 !important;
}
/* 45) toque para começar */
.tapstart {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  cursor: pointer;
  background: rgba(58, 36, 22, 0.18);
}
.tslogo {
  width: min(70vw, 52vh);
  filter: drop-shadow(0 0.8vh 0 rgba(58, 36, 22, 0.25));
  animation: popin 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.tsfox {
  width: min(34vw, 24vh);
  animation: wave 2.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.tstap {
  margin: 0;
  font:
    700 clamp(22px, 4.4vh, 48px) Fredoka,
    system-ui,
    sans-serif;
  color: #fff;
  -webkit-text-stroke: max(4px, 0.7vh) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.5vh 0 var(--ink);
  animation: tsblink 1.4s ease-in-out infinite;
}
@keyframes tsblink {
  50% {
    transform: scale(1.06);
    opacity: 0.75;
  }
}
/* 21) desfile: entra pulando, acena (pulinho) um de cada vez, depois balança */
.wparade i img.pkimg,
.wparade i canvas {
  animation-name: hop, pkwave, bob2 !important;
  animation-duration: 0.5s, 0.55s, 1.6s !important;
  animation-timing-function: cubic-bezier(0.3, 1.8, 0.5, 1), ease-in-out, ease-in-out !important;
  animation-iteration-count: 1, 1, infinite !important;
  animation-fill-mode: both, none, none !important;
}
@keyframes pkwave {
  40% {
    transform: translateY(-14%) rotate(-6deg);
  }
  70% {
    transform: translateY(0) rotate(4deg);
  }
}
/* 27) brilho que passa na pílula do progresso quando ela sobe */
.prog,
.pcount {
  position: relative;
  overflow: hidden;
}
.prog.shine::after,
.pcount.shine::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: shine 0.7s ease-out;
  pointer-events: none;
}
@keyframes shine {
  to {
    left: 120%;
  }
}
/* 38) fase liberada: cadeado pula e some, cartão dá um pulinho */
.lc .lk.lkfly {
  animation: lkfly 1.1s 0.3s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
@keyframes lkfly {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  35% {
    transform: translate(-50%, -80%) scale(1.25) rotate(-12deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -160%) scale(0.6) rotate(20deg);
    opacity: 0;
  }
}
.lc.unlocking {
  animation: unl 0.6s 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes unl {
  40% {
    transform: scale(1.08);
  }
}
/* tela de fases: título de cada mundo ocupando a linha toda */
.wtitle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.2vh;
  padding: 0.6vh 1.6vh;
  margin-top: 0.8vh;
  border-radius: 99px;
  background: linear-gradient(#ffe48a, #f7c948);
  border: max(3px, 0.45vh) solid var(--ink);
  box-shadow: 0 0.5vh 0 rgba(58, 36, 22, 0.3);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(14px, 2.6vh, 26px);
}
.map.lay .wtitle {
  font-size: 2.4cqh;
  padding: 0.5cqh 1.6cqh;
  border-width: 0.4cqh;
  gap: 1.2cqh;
}
.wtitle .wn {
  background: #fff7e4;
  border: max(2px, 0.3vh) solid var(--ink);
  border-radius: 99px;
  padding: 0 1.2vh;
  font-size: 0.82em;
}
.wtitle b {
  flex: 1;
}
.wtitle .ws {
  display: flex;
  align-items: center;
  gap: 0.6vh;
  font-size: 0.9em;
}
.wtitle .ws img {
  height: 1.2em;
  width: auto;
}
.wtitle.locked {
  filter: grayscale(0.8);
  opacity: 0.75;
}
/* painel deitado com lista grande (mais de 8): 3 colunas, começa logo abaixo da pílula e nunca sobe por cima dela */
body.land #panel #slots {
  grid-template-columns: repeat(var(--pcols, 2), 1fr) !important;
  width: calc(20.5 * var(--g)) !important;
}
body.land #panel #slots.many {
  align-content: start !important;
  overflow: hidden;
  gap: calc(0.8 * var(--gh)) calc(0.8 * var(--g)) !important;
  grid-auto-rows: min(calc(14.6 * var(--gh)), calc(45 * var(--gh)) / var(--rows, 3)) !important;
}
body.land #panel #slots .slot:last-child:nth-child(odd) {
  width: auto !important;
  justify-self: stretch !important;
  grid-column: auto !important;
}
body.land #panel #slots:not(.many) .slot:last-child:nth-child(odd) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: calc(9.9 * var(--g)) !important;
}
/* pílula do progresso deitada: cresce com o texto (0/8 cortava na borda da arte) */
body.land .prog {
  width: auto !important;
  min-width: calc(13.2 * var(--g));
}
/* álbum deitado refeito (07/11): 5 x 2 casinhas de tamanho fixo, figura contida, nome embaixo, sem rolagem */
.win .card:has(.albumgrid) {
  width: min(94vw, 760px, 112vh) !important;
}
.win .albumgrid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1.4vh, 14px) !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 1.2vh 0 2vh !important;
}
.win .albumgrid .pal {
  position: relative;
  aspect-ratio: 5 / 6;
  min-width: 0;
  padding: 0 2px 1vh !important;
  justify-content: flex-end;
  overflow: visible;
  background: linear-gradient(#fffaf0, #f6e3c0) !important;
  border: max(2.5px, 0.4vh) solid var(--ink) !important;
  border-radius: clamp(10px, 2vh, 20px) !important;
  box-shadow: 0 0.5vh 0 rgba(58, 36, 22, 0.25);
}
.win .albumgrid .pal img.pkimg {
  position: absolute;
  left: 50%;
  top: 9%;
  transform: translateX(-50%);
  width: 82% !important;
  height: 64% !important;
  object-fit: contain;
  filter: drop-shadow(0 0.3vh 0 rgba(58, 36, 22, 0.2));
}
.win .albumgrid .pal.unknown img.pkimg {
  filter: brightness(0) opacity(0.22);
}
.win .albumgrid .pal span {
  position: relative;
  z-index: 1;
  font-size: clamp(10px, 1.9vh, 18px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96%;
}
.win .albumgrid .palx {
  top: -0.9vh !important;
  right: -0.6vh !important;
  font-size: clamp(10px, 1.6vh, 15px) !important;
  line-height: 1.35 !important;
  padding: 0 0.7vh !important;
  z-index: 2;
}
/* pílula "Level 30" deitada: estrelas menores e um pouco sobrepostas para não encostar na ponta */
body.land .lvl .stars i img {
  height: calc(4.2 * var(--gh)) !important;
}
body.land .lvl .stars i + i {
  margin-left: calc(-0.6 * var(--gh));
}
body.land .lvl .stars {
  margin-right: calc(2 * var(--gh)) !important;
}
body.land .lvl > span:first-child {
  font-size: calc(5 * var(--gh));
}
/* barras de rolagem do jogo: trilho creme e alça dourada com contorno, igual às pílulas */
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}
::-webkit-scrollbar-track {
  background: #f6e3c0;
  border-radius: 99px;
  box-shadow: inset 0 0 0 2px rgba(58, 36, 22, 0.28);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #ffe48a, #f7c948 55%, #e8a93a);
  border: 2.5px solid var(--ink);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(90deg, #fff0b0, #ffd43b);
}
::-webkit-scrollbar-button,
::-webkit-scrollbar-corner {
  display: none;
  background: transparent;
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #f7c948 #f6e3c0;
  }
}
/* transição de lupa entre telas */
.irisx {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: all;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #fff1bf, #f7c948 62%, #e39a2e);
}
.irisx::before {
  content: '';
  position: fixed;
  left: 50%;
  top: 50%;
  width: 160vmax;
  height: 160vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0 9deg, transparent 9deg 18deg);
  animation: irspin 5s linear infinite;
}
.irisx .ring {
  position: fixed;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow:
    0 0 0 5px #3a2416,
    0 0 0 17px #ffd43b,
    0 0 0 22px #3a2416,
    0 8px 0 22px rgba(58, 36, 22, 0.25);
}
.irisx .ifox {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(42vw, 36vh);
  transform: translate(-50%, -50%) scale(0);
  filter: drop-shadow(0 1vh 0 rgba(58, 36, 22, 0.25));
}
.irisx .ifox.on {
  animation: irfox 0.42s cubic-bezier(0.3, 1.7, 0.5, 1) forwards;
}
.irisx .ifox.on.off {
  animation: irfoxout 0.26s ease-in forwards;
}
@keyframes irspin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes irfox {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(-14deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0);
  }
}
@keyframes irfoxout {
  from {
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    transform: translate(-50%, -62%) scale(0.2) rotate(10deg);
    opacity: 0;
  }
}
/* abertura: bichinhos dos cantos menores que a raposa e grudados nos cantos (borda escura do arbusto fica fora da tela) */
.title .tcl {
  bottom: -2.4vmin !important;
}
.title .tcl.l {
  left: -2.2vmin !important;
}
.title .tcl.r {
  right: -2.2vmin !important;
}
body.land .title {
  --cw: min(24vw, 40vh);
  --fw: min(15vw, 22vh);
}
/* número do cartão de fase: menor e mais alto (estava colado na borda de baixo da miniatura) */
.lmap .lc .num {
  font-size: 16cqh !important;
  top: 33% !important;
  -webkit-text-stroke: 2.6cqh var(--ink) !important;
  text-shadow: 0 1.3cqh 0 var(--ink) !important;
}
.lc .num {
  font-size: 4cqh;
  top: 52%;
}
/* noite sem cena noturna pintada (jardim, acampamento): a miniatura escurece em azul */
.lc .th.v3.dk {
  filter: brightness(0.55) saturate(0.8) hue-rotate(195deg) sepia(0.15);
}
.lc.lock .th.v3.dk {
  filter: grayscale(1) brightness(0.6);
}
.lmap .lc .lk {
  top: 25% !important;
  width: 26% !important;
}
.lmap .lc.lock .num {
  top: 40% !important;
}
/* mapa em pé: número no meio da miniatura; trancado = cadeado em cima, número embaixo dele */
.map.lay .lc .num {
  top: 30% !important;
  font-size: 3.7cqh !important;
}
.map.lay .lc .lk {
  top: 27% !important;
  width: 24% !important;
}
.map.lay .lc.lock .num {
  top: 37% !important;
}
.map.lay .mpill {
  justify-content: center;
}
@media (max-height: 430px) {
  body.land .title {
    --fw: min(13vw, 20vh);
  }
} /* tela deitada baixinha: raposa não encosta no Play */
/* abertura deitada (07/11, mockup do Codex): logo/faixa/Play maiores no centro, raposa em pé à direita do Play */
.title.tland .logo {
  width: min(42vw, 52vh);
}
.title.tland .play {
  font-size: clamp(26px, 7vh, 110px);
}
.title.tland p.sub {
  font-size: clamp(14px, 2.9vh, 30px) !important;
}
.title.tland .playrow {
  position: relative;
  z-index: 1;
  display: inline-block;
}
/* fase deitada (07/11, mockup do Codex): raposa menor, encostada no canto, para sobrar mais cena para procurar */
body.land .foxwrap {
  width: calc(16 * var(--g)) !important;
}
body.land .foxwrap #fox {
  width: calc(16.5 * var(--g)) !important;
  max-height: calc(31 * var(--gh)) !important;
}
body.land .foxwrap #say {
  left: calc(14 * var(--g)) !important;
}
/* botões com mola (individual `scale` soma com o transform de posição) + anelzinho dourado no toque */
:where(button) {
  transition: scale 0.28s cubic-bezier(0.3, 1.8, 0.5, 1);
}
:where(button):active {
  scale: 0.92;
  transition-duration: 0.06s;
}
.tapring2 {
  position: fixed;
  z-index: 120;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 3px #ffd43b,
    0 0 0 5px rgba(58, 36, 22, 0.55);
  animation: tapring2 0.42s ease-out forwards;
}
@keyframes tapring2 {
  to {
    transform: scale(4.2);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  :where(button):active {
    scale: 1;
  }
}
/* carimbo "Perfect!" da fase perfeita: selo dourado inclinado que desce com peso depois das estrelas */
.wstamp {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 40% 35%, #fff2a8, #f7c948 60%, #e8a93a);
  border: 0.7cqh solid var(--ink);
  box-shadow:
    inset 0 0 0 0.5cqh #fff6d0,
    inset 0 0 0 0.9cqh rgba(58, 36, 22, 0.35),
    0 0.7cqh 0 rgba(58, 36, 22, 0.3);
  transform: rotate(-14deg);
  animation: stampin 0.38s 1.8s cubic-bezier(0.5, 0, 0.6, 1.6) both;
}
.wstamp span {
  font-weight: 700;
  font-size: 4.4cqh;
  color: #fff;
  -webkit-text-stroke: 0.55cqh var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 0.3cqh 0 var(--ink);
  text-align: center;
  line-height: 1;
  padding: 0 0.4cqh;
}
.lv2 .wstamp span {
  font-size: 4.6cqh;
}
@keyframes stampin {
  0% {
    transform: scale(2.6) rotate(-34deg);
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-14deg);
    opacity: 1;
  }
}
.wtime {
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .wstamp {
    animation: none;
  }
}
/* mundo novo liberado: a faixa do mundo desenrola com mola e passa um brilho */
.wtitle.unroll {
  transform-origin: 0 50%;
  animation:
    unroll 0.7s 0.2s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    wglow 1.2s 0.9s ease-out both;
}
@keyframes wglow {
  0% {
    filter: brightness(1);
  }
  30% {
    filter: brightness(1.35) drop-shadow(0 0 1.2vh #ffe066);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes unroll {
  from {
    transform: scaleX(0.05);
    opacity: 0.4;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes wshine {
  to {
    transform: translateX(120%);
  }
}
/* álbum: bichinho novo vira o cartão e ganha carimbo */
.fresh {
  animation: aflip 0.55s var(--fd, 0.4s) cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
@keyframes aflip {
  0% {
    transform: perspective(600px) rotateY(90deg) scale(0.9);
  }
  100% {
    transform: perspective(600px) rotateY(0) scale(1);
  }
}
.fresh .newst {
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%) rotate(-10deg);
  z-index: 3;
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(10px, 1.7vh, 16px);
  color: #fff;
  background: linear-gradient(#7ee08a, #3fb950);
  border: max(2px, 0.3vh) solid var(--ink);
  border-radius: 99px;
  padding: 0.1em 0.55em;
  -webkit-text-stroke: max(1.5px, 0.25vh) var(--ink);
  paint-order: stroke fill;
  animation: newst 0.4s calc(var(--fd, 0.4s) + 0.45s) cubic-bezier(0.5, 0, 0.6, 1.6) both;
  pointer-events: none;
}
.map.lay .fresh .newst,
.av .fresh .newst {
  font-size: 1.6cqh;
}
@keyframes newst {
  from {
    transform: translateX(-50%) scale(2.4) rotate(-30deg);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) scale(1) rotate(-10deg);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fresh,
  .fresh .newst,
  .wtitle.unroll {
    animation: none;
  }
}
/* menu deitado: Play com a mesma arte do botão da tela de fases (pedido 08/11) */
.title.tland .play.ibtn {
  --bh: clamp(52px, 11.5vh, 150px);
  height: var(--bh);
  border-width: 0 calc(var(--bh) * 78 / 155);
  padding: 0 calc(var(--bh) * 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--bh) * 0.56);
  color: #fff;
  -webkit-text-stroke: calc(var(--bh) * 0.075) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--bh) * 0.05) 0 var(--ink);
  line-height: 1;
}
/* raposa do menu deitado: tela larga = ao lado do Play, de pé perto da base (na frente das plantas, não em cima do vaso);
   tela deitada mas alta (tablet, janela quase quadrada) = no meio, maior, embaixo */
body.land .title.tland {
  --fw: min(30vw, 27vh);
  --fb: 1.5vh;
}
@media (min-aspect-ratio: 29/20) {
  body.land .title.tland .tfoxn {
    left: calc(50% + var(--bh, 11.5vh) * 1.9 + 2vw) !important;
    bottom: 2vh !important;
    width: min(13vw, 26vh) !important;
  }
}
/* tela de fases: Play e estrelas um pouco mais altos (pedido 08/11) */
.lc .st {
  bottom: 7%;
}
.lc .go {
  bottom: -6% !important;
}
.lc.cur .st {
  visibility: hidden;
}
.lmap .lc .go {
  bottom: -4% !important;
}
/* mapa em pé: altura fixa só nos cartões (a faixa do mundo ocupava a altura de um cartão) */
.map.lay .grid {
  grid-auto-rows: auto !important;
}
.map.lay .grid .lc {
  height: 18.8cqh;
}
/* rodada 1 do crítico (08/11): idioma no estilo do jogo, fim da lista de fases esmaecido (dá para rolar), nomes do álbum legíveis */
.srow .langsel {
  -webkit-appearance: none;
  appearance: none;
  height: 5.2cqh;
  min-width: 0;
  flex: 1;
  max-width: none;
  padding: 0 5cqh 0 2cqh;
  border-radius: 99px;
  background: #fffaf0
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%233a2416' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 1.8cqh center / 2.4cqh auto;
  box-shadow: inset 0 -0.5cqh 0 rgba(58, 36, 22, 0.12);
  cursor: pointer;
}
.acard .lb {
  font-size: max(12px, 1.75cqh) !important;
}
/* rodada 2 do crítico: idioma sem cortar, nomes do álbum dentro do cartão, selo com texto proporcional, "Tap to start" com plaquinha */
.srow-t .sl {
  flex: 0 0 auto !important;
}
.srow .langsel {
  padding: 0 4.2cqh 0 1.8cqh !important;
  min-height: max(5.2cqh, 34px);
  font-size: max(2.4cqh, 14px);
}
.acard .art {
  width: 84% !important;
  height: 7cqh !important;
  object-fit: contain;
  margin-top: 0.5cqh !important;
}
.acard .lb {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.2cqh;
  text-align: center;
  margin: 0 !important;
}
.wstamp {
  container-type: inline-size;
}
.wstamp span,
.lv2 .wstamp span {
  font-size: 21cqi !important;
  -webkit-text-stroke: 3.4cqi var(--ink) !important;
  text-shadow: 0 2cqi 0 var(--ink) !important;
}
.win:has(.wstamp) .wspark.r {
  display: none;
}
.tstap {
  background: rgba(58, 36, 22, 0.55);
  padding: 0.04em 0.85em 0.08em !important;
  border-radius: 99px;
  box-shadow: 0 0.35vh 0 rgba(58, 36, 22, 0.35);
}
.wtime {
  margin-left: 0.3em;
} /* "Time 0:00": a caixa flex apagava o espaço */
/* modo teste (?teste=1, só em casa): barrinha discreta no topo do jogo e selo no canto */
.testbar {
  position: fixed;
  left: 50%;
  top: calc(var(--sat, 0px) + max(64px, 11vh));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  background: rgba(40, 20, 60, 0.82);
  border: 2px solid #fff;
  border-radius: 99px;
  font:
    700 13px/1 Fredoka,
    system-ui,
    sans-serif;
  color: #fff;
  pointer-events: auto;
}
.testbar b {
  padding: 0 4px;
  color: #ffd43b;
  letter-spacing: 0.05em;
}
.testbar button {
  font: inherit;
  color: #3a2416;
  background: #fff;
  border: 0;
  border-radius: 99px;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.testbar {
  white-space: nowrap;
}
html.teste body::after {
  content: 'MODO TESTE';
  position: fixed;
  left: 6px;
  bottom: 6px;
  z-index: 200;
  font:
    700 10px Fredoka,
    system-ui,
    sans-serif;
  color: #fff;
  background: rgba(40, 20, 60, 0.75);
  padding: 3px 7px;
  border-radius: 99px;
  pointer-events: none;
}
/* balão de fala retangular (08/11): cresce com o texto e nunca corta, em qualquer idioma; rabinho aponta para a raposa */
#say,
.foxwrap #say,
#tray #say,
body.land .foxwrap #say,
body:not(.land) #say,
body:not(.land) #tray #say {
  background: #fffaf0 !important;
  background-image: none !important;
  border: max(3px, 0.42vmin) solid var(--ink) !important;
  border-image: none !important;
  border-radius: clamp(14px, 2.4vmin, 24px) !important;
  box-shadow: 0 max(3px, 0.55vmin) 0 rgba(58, 36, 22, 0.3) !important;
  padding: clamp(8px, 1.3vmin, 14px) clamp(12px, 2.1vmin, 20px) !important;
  box-sizing: border-box !important;
  width: max-content !important;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  font-size: clamp(15px, 2.3vmin, 22px) !important;
  line-height: 1.22 !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal !important;
}
body:not(.land) #tray #say,
body:not(.land) #say {
  left: calc(4 * var(--f)) !important;
  top: auto !important;
  bottom: calc(100% + 2.2 * var(--fh)) !important;
  max-width: min(300px, 76vw) !important;
  transform: none;
}
body.land .foxwrap #say {
  max-width: min(340px, 32vw) !important;
}
#say::after,
#say::before {
  content: '' !important;
  display: block !important;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  pointer-events: none;
}
#say::after {
  left: clamp(18px, 3vmin, 30px);
  bottom: calc(-1 * clamp(14px, 2.2vmin, 20px));
  border-width: clamp(14px, 2.2vmin, 20px) clamp(8px, 1.3vmin, 12px) 0 clamp(8px, 1.3vmin, 12px) !important;
  border-color: var(--ink) transparent transparent transparent !important;
}
#say::before {
  left: calc(clamp(18px, 3vmin, 30px) + max(3px, 0.42vmin));
  bottom: calc(-1 * clamp(14px, 2.2vmin, 20px) + max(4px, 0.62vmin));
  z-index: 1;
  border-width: calc(clamp(14px, 2.2vmin, 20px) - max(4px, 0.62vmin))
    calc(clamp(8px, 1.3vmin, 12px) - max(3px, 0.42vmin)) 0 calc(clamp(8px, 1.3vmin, 12px) - max(3px, 0.42vmin));
  border-color: #fffaf0 transparent transparent transparent;
}
/* tela final: janela flexível (cresce com o texto de qualquer idioma) */
.endcard .card {
  width: min(92vw, 560px) !important;
  text-align: center;
}
.endcard .endmsg {
  font-size: clamp(16px, 2.6vmin, 24px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0.4em 0 0.6em;
}
.endcard .endstats {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0.6em;
}
.endcard .endstats span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: clamp(16px, 2.4vmin, 22px);
  background: #fff8e8;
  border: 3px solid var(--ink);
  border-radius: 99px;
  padding: 4px 14px 4px 8px;
}
.endcard .endstats img {
  height: 1.5em;
  width: auto;
}
.endcard .endparade {
  position: static !important;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 0.4em;
  max-width: 470px;
}
.endcard .endparade i {
  flex: 0 0 17% !important;
  width: 17% !important;
  max-width: 74px !important;
  height: auto !important;
  display: block !important;
  position: static !important;
}
.endcard .endthanks {
  font-size: clamp(15px, 2.3vmin, 21px);
  font-weight: 700;
  margin: 0.3em 0 0.8em;
  color: #7a4a20;
}
.endcard .endbtns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.endcard .endbtns .ibtn {
  --bh: clamp(46px, 7.5vmin, 64px);
  height: var(--bh);
  border-width: 0 calc(var(--bh) * 78 / 155);
  padding: 0 calc(var(--bh) * 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--bh) * 0.42);
  line-height: 1;
}
.endcard .endbtns .ibtn.green {
  color: #fff;
  -webkit-text-stroke: calc(var(--bh) * 0.07) var(--ink);
  paint-order: stroke fill;
}
.endcard .endbtns .ibtn.cream {
  border-width: 0 calc(var(--bh) * 80 / 155);
}
/* QA 08/11: selo "New pal!" no topo do cartão (não cobre o nome); caixas com largura definida para o texto encolher quando não cabe */
.fresh .newst {
  bottom: auto !important;
  top: 5%;
  max-width: 94%;
  overflow: hidden;
  text-overflow: clip;
  font-size: clamp(9px, 1.5vh, 14px);
}
#phead {
  white-space: nowrap;
  overflow: hidden;
}
#hint small {
  white-space: nowrap;
  overflow: hidden;
  width: max-content;
  max-width: 22vw;
  box-sizing: border-box;
}
.endcard h2.ribbon {
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.wmsg,
.lmsg span {
  overflow: hidden;
}
/* tutorial guiado: mão e anel por cima da bandeja/painel; botão Pular discreto no topo */
#hand,
#tapring {
  z-index: 80 !important;
}
#tapring {
  border-radius: 50%;
}
.tutskip {
  position: fixed;
  left: 50%;
  top: calc(var(--sat, 0px) + max(66px, 11.5vh));
  transform: translateX(-50%);
  z-index: 81;
  font:
    700 clamp(13px, 1.9vmin, 17px) / 1 Fredoka,
    system-ui,
    sans-serif;
  color: var(--ink);
  background: rgba(255, 250, 240, 0.92);
  border: max(2px, 0.3vmin) solid var(--ink);
  border-radius: 99px;
  padding: 0.45em 1em;
  box-shadow: 0 3px 0 rgba(58, 36, 22, 0.25);
  cursor: pointer;
  white-space: nowrap;
}
html.teste .tutskip {
  top: calc(var(--sat, 0px) + max(110px, 17vh));
}
/* tutorial, passo da lista (celular em pé): a mão desce de cima até a bandeja, então o balão sobe para não ficar embaixo dela */
body.tutup:not(.land) #tray #say,
body.tutup:not(.land) #say {
  bottom: calc(100% + 2.2 * var(--fh) + clamp(84px, 12vh, 124px)) !important;
}
/* crítico do tutorial 08/11: balão maior em tablet/computador, sem quebrar palavra com hífen; "Pular" com alvo de 44 px */
#say,
.foxwrap #say,
#tray #say,
body.land .foxwrap #say,
body:not(.land) #say,
body:not(.land) #tray #say {
  font-size: clamp(15px, 2.8vmin, 24px) !important;
  hyphens: manual !important;
}
body.land .foxwrap #say {
  max-width: min(380px, 34vw) !important;
}
.tutskip {
  min-height: 44px;
  font-size: clamp(14px, 2.1vmin, 18px);
  padding: 0.5em 1.2em;
  background: #fffaf0;
  border-width: max(3px, 0.42vmin);
  box-shadow: 0 max(3px, 0.55vmin) 0 rgba(58, 36, 22, 0.3);
  display: inline-flex;
  align-items: center;
}
.tutskip {
  left: calc(env(safe-area-inset-left, 0px) + 12px) !important;
  transform: none !important;
} /* canto de cima à esquerda, abaixo do HUD (não cobre o letreiro) */
/* crítico do tutorial, rodada 2: mão e "Pular" proporcionais em telas grandes */
body.land #hand {
  width: clamp(46px, 8.5vmin, 88px) !important;
}
.tutskip {
  font-size: clamp(14px, 2.4vmin, 20px) !important;
  min-height: max(44px, 6vmin) !important;
}
#tapring {
  border-width: max(4px, 0.7vmin) !important;
  border-color: #ffc61a !important;
}
/* tutorial em tela grande deitada: balão ao lado do alvo do painel, com o rabinho apontando para ele */
.tutcall {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 79;
  pointer-events: none;
  box-sizing: border-box;
  width: max-content;
  max-width: min(340px, 28vw);
  background: #fffaf0;
  border: max(3px, 0.42vmin) solid var(--ink);
  border-radius: clamp(14px, 2.4vmin, 24px);
  box-shadow: 0 max(3px, 0.55vmin) 0 rgba(58, 36, 22, 0.3);
  padding: clamp(8px, 1.3vmin, 14px) clamp(12px, 2.1vmin, 20px);
  font:
    700 clamp(17px, 2.8vmin, 24px) / 1.22 Fredoka,
    system-ui,
    sans-serif;
  color: var(--ink);
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s;
}
.tutcall.on {
  opacity: 1;
}
.tutcall::after {
  content: '';
  position: absolute;
  right: calc(-1 * clamp(14px, 2.2vmin, 20px));
  top: calc(50% + var(--ty, 0px));
  translate: 0 -50%;
  border-style: solid;
  border-width: clamp(8px, 1.3vmin, 12px) 0 clamp(8px, 1.3vmin, 12px) clamp(14px, 2.2vmin, 20px);
  border-color: transparent transparent transparent var(--ink);
}
body.tutnear #say {
  opacity: 0 !important;
}
body.modal .tutcall {
  display: none;
}
/* arrastar: seta fixa de ida e volta embaixo do rastro */
.swipehand .swipearrow {
  position: absolute;
  left: 6%;
  width: 88%;
  top: 58%;
  height: 34%;
  overflow: visible;
}
.swipehand .swipearrow path {
  fill: none;
  stroke: #fffaf0;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.swipehand .swipearrow path.o {
  stroke: var(--ink);
  stroke-width: 11;
}
/* celular em pé: + e − maiores (toque de ~50 px com o ajuste do William por cima) */
body:not(.land) #zbtns .round {
  width: max(46px, calc(5.2 * var(--fh))) !important;
  height: max(46px, calc(5.2 * var(--fh))) !important;
}
/* botões em 3 pedaços (border-image): em alguns tamanhos sobra uma fresta de 1 px entre a ponta e o meio (o "risco").
   Por baixo, só a faixa do meio (cores tiradas da própria arte, coluna central), 2 px mais larga de cada lado: tapa a fresta e não aparece nos cantos. */
.pribbon {
  background: linear-gradient(
      rgba(53, 27, 8, 0.58) 0%,
      rgba(55, 28, 10, 0.99) 2.3%,
      rgba(56, 29, 11, 0.99) 4.6%,
      rgba(255, 242, 198, 1) 6.9%,
      rgba(252, 240, 189, 1) 9.2%,
      rgba(251, 238, 190, 1) 11.49%,
      rgba(251, 227, 135, 0.99) 13.79%,
      rgba(252, 227, 133, 0.99) 16.09%,
      rgba(252, 227, 131, 0.99) 18.39%,
      rgba(251, 226, 130, 0.99) 20.69%,
      rgba(252, 227, 131, 0.99) 22.99%,
      rgba(251, 226, 130, 0.99) 25.29%,
      rgba(251, 226, 130, 0.99) 27.59%,
      rgba(251, 226, 130, 0.99) 29.89%,
      rgba(253, 225, 130, 0.99) 32.18%,
      rgba(252, 225, 124, 0.99) 34.48%,
      rgba(251, 222, 118, 0.99) 36.78%,
      rgba(251, 222, 118, 1) 39.08%,
      rgba(252, 221, 118, 0.99) 41.38%,
      rgba(251, 220, 117, 0.99) 43.68%,
      rgba(252, 219, 112, 0.99) 45.98%,
      rgba(252, 219, 112, 0.99) 48.28%,
      rgba(252, 219, 110, 0.99) 50.57%,
      rgba(252, 220, 106, 0.99) 52.87%,
      rgba(252, 219, 102, 0.99) 55.17%,
      rgba(251, 217, 101, 0.99) 57.47%,
      rgba(253, 217, 99, 0.99) 59.77%,
      rgba(251, 216, 96, 0.99) 62.07%,
      rgba(253, 216, 94, 0.99) 64.37%,
      rgba(252, 215, 93, 0.99) 66.67%,
      rgba(251, 214, 90, 0.99) 68.97%,
      rgba(251, 214, 90, 0.99) 71.26%,
      rgba(251, 212, 87, 0.99) 73.56%,
      rgba(251, 212, 87, 0.99) 75.86%,
      rgba(251, 212, 87, 0.99) 78.16%,
      rgba(253, 210, 83, 0.99) 80.46%,
      rgba(246, 186, 49, 0.99) 82.76%,
      rgba(252, 188, 48, 0.99) 85.06%,
      rgba(252, 188, 46, 0.99) 87.36%,
      rgba(252, 188, 46, 0.99) 89.66%,
      rgba(251, 190, 49, 0.99) 91.95%,
      rgba(65, 29, 0, 0.99) 94.25%,
      rgba(55, 28, 10, 0.99) 96.55%,
      rgba(55, 28, 10, 0.99) 98.85%,
      rgba(58, 26, 10, 0.69) 100%
    )
    center / calc(100% + 4px) 100% no-repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
}
.lribbon,
.lm-title,
body.land #panel .head {
  background: linear-gradient(
      rgba(53, 27, 8, 0.58) 0%,
      rgba(55, 28, 10, 0.99) 2.3%,
      rgba(56, 29, 11, 0.99) 4.6%,
      rgba(255, 242, 198, 1) 6.9%,
      rgba(252, 240, 189, 1) 9.2%,
      rgba(251, 238, 190, 1) 11.49%,
      rgba(251, 227, 135, 0.99) 13.79%,
      rgba(252, 227, 133, 0.99) 16.09%,
      rgba(252, 227, 131, 0.99) 18.39%,
      rgba(251, 226, 130, 0.99) 20.69%,
      rgba(252, 227, 131, 0.99) 22.99%,
      rgba(251, 226, 130, 0.99) 25.29%,
      rgba(251, 226, 130, 0.99) 27.59%,
      rgba(251, 226, 130, 0.99) 29.89%,
      rgba(253, 225, 130, 0.99) 32.18%,
      rgba(252, 225, 124, 0.99) 34.48%,
      rgba(251, 222, 118, 0.99) 36.78%,
      rgba(251, 222, 118, 1) 39.08%,
      rgba(252, 221, 118, 0.99) 41.38%,
      rgba(251, 220, 117, 0.99) 43.68%,
      rgba(252, 219, 112, 0.99) 45.98%,
      rgba(252, 219, 112, 0.99) 48.28%,
      rgba(252, 219, 110, 0.99) 50.57%,
      rgba(252, 220, 106, 0.99) 52.87%,
      rgba(252, 219, 102, 0.99) 55.17%,
      rgba(251, 217, 101, 0.99) 57.47%,
      rgba(253, 217, 99, 0.99) 59.77%,
      rgba(251, 216, 96, 0.99) 62.07%,
      rgba(253, 216, 94, 0.99) 64.37%,
      rgba(252, 215, 93, 0.99) 66.67%,
      rgba(251, 214, 90, 0.99) 68.97%,
      rgba(251, 214, 90, 0.99) 71.26%,
      rgba(251, 212, 87, 0.99) 73.56%,
      rgba(251, 212, 87, 0.99) 75.86%,
      rgba(251, 212, 87, 0.99) 78.16%,
      rgba(253, 210, 83, 0.99) 80.46%,
      rgba(246, 186, 49, 0.99) 82.76%,
      rgba(252, 188, 48, 0.99) 85.06%,
      rgba(252, 188, 46, 0.99) 87.36%,
      rgba(252, 188, 46, 0.99) 89.66%,
      rgba(251, 190, 49, 0.99) 91.95%,
      rgba(65, 29, 0, 0.99) 94.25%,
      rgba(55, 28, 10, 0.99) 96.55%,
      rgba(55, 28, 10, 0.99) 98.85%,
      rgba(58, 26, 10, 0.69) 100%
    )
    center / calc(100% + 4px) 100% no-repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
}
.ibtn.green {
  background: linear-gradient(
      rgba(55, 28, 8, 0.69) 0%,
      rgba(55, 28, 8, 0.99) 2.6%,
      rgba(57, 29, 7, 0.99) 5.19%,
      rgba(222, 247, 105, 1) 7.79%,
      rgba(223, 251, 105, 0.99) 10.39%,
      rgba(180, 237, 45, 0.99) 12.99%,
      rgba(178, 237, 41, 0.99) 15.58%,
      rgba(178, 237, 41, 0.99) 18.18%,
      rgba(174, 235, 41, 0.99) 20.78%,
      rgba(174, 235, 41, 0.99) 23.38%,
      rgba(170, 233, 39, 0.99) 25.97%,
      rgba(166, 232, 36, 0.99) 28.57%,
      rgba(163, 231, 37, 0.99) 31.17%,
      rgba(162, 230, 36, 0.99) 33.77%,
      rgba(158, 228, 36, 0.99) 36.36%,
      rgba(154, 226, 34, 0.99) 38.96%,
      rgba(150, 225, 31, 0.99) 41.56%,
      rgba(149, 224, 30, 0.99) 44.16%,
      rgba(146, 223, 31, 0.99) 46.75%,
      rgba(143, 223, 30, 0.99) 49.35%,
      rgba(140, 221, 27, 0.99) 51.95%,
      rgba(136, 220, 25, 0.99) 54.55%,
      rgba(133, 219, 24, 0.99) 57.14%,
      rgba(132, 218, 23, 0.99) 59.74%,
      rgba(129, 217, 24, 0.99) 62.34%,
      rgba(125, 216, 21, 0.99) 64.94%,
      rgba(121, 214, 19, 0.99) 67.53%,
      rgba(118, 214, 18, 0.99) 70.13%,
      rgba(117, 215, 18, 0.99) 72.73%,
      rgba(114, 212, 15, 0.99) 75.32%,
      rgba(112, 210, 15, 0.99) 77.92%,
      rgba(112, 210, 15, 0.99) 80.52%,
      rgba(110, 210, 17, 0.99) 83.12%,
      rgba(66, 153, 0, 1) 85.71%,
      rgba(63, 146, 2, 1) 88.31%,
      rgba(62, 145, 1, 0.99) 90.91%,
      rgba(67, 88, 15, 0.99) 93.51%,
      rgba(51, 27, 3, 0.99) 96.1%,
      rgba(52, 26, 5, 0.99) 98.7%,
      rgba(52, 26, 5, 0.78) 100%
    )
    center / calc(100% + 4px) 100% no-repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
}
.ibtn.cream {
  background: linear-gradient(
      rgba(60, 34, 15, 0.65) 0%,
      rgba(60, 34, 15, 0.99) 2.52%,
      rgba(60, 36, 17, 0.99) 5.03%,
      rgba(255, 247, 233, 1) 7.55%,
      rgba(251, 243, 225, 1) 10.06%,
      rgba(251, 240, 219, 0.99) 12.58%,
      rgba(251, 239, 216, 0.99) 15.09%,
      rgba(251, 239, 216, 0.99) 17.61%,
      rgba(253, 238, 214, 0.99) 20.13%,
      rgba(253, 238, 214, 0.99) 22.64%,
      rgba(251, 237, 212, 0.99) 25.16%,
      rgba(251, 237, 212, 0.99) 27.67%,
      rgba(252, 236, 209, 0.99) 30.19%,
      rgba(252, 236, 209, 0.99) 32.7%,
      rgba(251, 235, 206, 0.99) 35.22%,
      rgba(251, 235, 206, 0.99) 37.74%,
      rgba(252, 234, 204, 0.99) 40.25%,
      rgba(251, 233, 203, 0.99) 42.77%,
      rgba(253, 233, 201, 0.99) 45.28%,
      rgba(252, 232, 200, 0.99) 47.8%,
      rgba(252, 232, 198, 0.99) 50.31%,
      rgba(252, 232, 198, 0.99) 52.83%,
      rgba(252, 231, 195, 0.99) 55.35%,
      rgba(251, 230, 191, 0.99) 57.86%,
      rgba(251, 230, 191, 0.99) 60.38%,
      rgba(250, 229, 190, 0.99) 62.89%,
      rgba(251, 228, 190, 0.99) 65.41%,
      rgba(251, 228, 188, 1) 67.92%,
      rgba(252, 227, 185, 1) 70.44%,
      rgba(251, 225, 184, 0.99) 72.96%,
      rgba(251, 225, 184, 0.99) 75.47%,
      rgba(249, 224, 183, 0.99) 77.99%,
      rgba(251, 224, 181, 0.99) 80.5%,
      rgba(251, 224, 181, 0.99) 83.02%,
      rgba(242, 201, 147, 1) 85.53%,
      rgba(236, 191, 133, 1) 88.05%,
      rgba(237, 193, 131, 0.99) 90.57%,
      rgba(240, 198, 148, 0.99) 93.08%,
      rgba(63, 34, 17, 0.99) 95.6%,
      rgba(62, 35, 15, 0.99) 98.11%,
      rgba(62, 35, 15, 0.74) 100%
    )
    center / calc(100% + 4px) 100% no-repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
}

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