/* Hen mascot, desktop side panel, level eggs, undo, combo, volume sliders, scrolling screens and the collection.
   Loaded in order from index.html (01 to 04): later files override earlier ones. */

/* galinha mascote (imagens em assets/galinha-*.webp): painel do desktop e home deitada; respira parada e comemora a cada caixa cheia */
#hud .hen,
.hen-home {
  display: none;
  pointer-events: none;
  transform-origin: 50% 100%;
}
body.land #hud .hen {
  display: block;
  width: min(72%, 24vh);
  margin-top: calc(6 * var(--u));
  animation: henIdle 2.6s ease-in-out infinite;
}
#hud .hen.cheer {
  animation:
    henCheer 560ms cubic-bezier(0.3, 1.5, 0.5, 1),
    henIdle 2.6s ease-in-out 560ms infinite;
}
body.land .hen-home {
  display: block;
  position: absolute;
  left: 3%;
  bottom: calc(var(--sab) + 2%);
  width: min(17vw, 34vh);
  animation: henIdle 2.6s ease-in-out infinite;
}
@keyframes henIdle {
  50% {
    scale: 1.02 0.98;
  }
}
@keyframes henCheer {
  30% {
    translate: 0 calc(-16 * var(--u));
    scale: 0.95 1.07;
  }
  62% {
    translate: 0 0;
    scale: 1.06 0.94;
  }
}

/* painel do desktop: pílulas da mesma largura e altura, alinhadas */
body.land #hud .pill {
  width: min(100%, calc(210 * var(--u)));
  height: calc(46 * var(--u));
  padding: 0 calc(12 * var(--u));
}
body.land #hud .timer {
  min-width: 0;
}
body.land #hud .timer .bar {
  width: auto;
  flex: 1 1 auto;
}

/* ajudante trancado: pílula da fase dentro do círculo e cadeado no canto de cima */
.booster .badge.lv {
  bottom: calc(4 * var(--u)) !important;
  font-size: calc(12 * var(--u)) !important;
  height: calc(22 * var(--u)) !important;
  min-width: 0 !important;
  padding: 0 calc(6 * var(--u)) !important;
  border-width: calc(2.5 * var(--u)) !important;
}
.booster .lock {
  top: calc(-4 * var(--u));
  right: calc(-4 * var(--u));
  bottom: auto !important;
}

/* painel do desktop colado no tabuleiro: conteúdo encostado no lado do tabuleiro */
body.land #hud {
  --panelPad: 0px;
}
@keyframes goIn {
  from {
    opacity: 0;
    translate: 0 calc(6 * var(--u));
  }
}
#hud .hen.swap,
.hen-home.swap {
  animation:
    henSwap 240ms cubic-bezier(0.3, 1.6, 0.5, 1),
    henIdle 2.6s ease-in-out 240ms infinite;
}
@keyframes henSwap {
  from {
    scale: 0.93 1.05;
  }
}
.booster .lock {
  top: 0 !important;
  right: 0 !important;
}

/* seletor de fase: ovo no ninho em imagem, número em código */
#home .egg {
  width: auto;
  height: auto;
}
#home .egg img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(60, 36, 22, 0.25));
}
#home .egg .n {
  inset: 0 0 auto 0 !important;
  top: 26% !important;
  height: 30%;
  padding: 0 !important;
  font-size: calc(30 * var(--u)) !important;
  color: #5a3418;
  -webkit-text-stroke: 0;
  text-shadow: 0 calc(1.5 * var(--u)) 0 rgba(255, 255, 255, 0.8);
}
#home .egg.done .n {
  top: 44% !important;
  font-size: calc(26 * var(--u)) !important;
}
#home .egg.locked img {
  filter: saturate(0.55) brightness(0.97) drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(60, 36, 22, 0.2));
}
#home .egg.locked .n {
  opacity: 0.7;
}
#home .egg.cur {
  animation: eggPulse 1.8s ease-in-out infinite;
}
#home .egg.cur img {
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 236, 150, 0.95))
    drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(60, 36, 22, 0.25));
}
@keyframes eggPulse {
  50% {
    transform: translate(-50%, -50%) scale(1.05);
  }
}
#home .egg.done .n {
  top: 47% !important;
  font-size: calc(28 * var(--u)) !important;
}
#home .egg.locked img {
  filter: saturate(0.75) drop-shadow(0 calc(4 * var(--u)) calc(3 * var(--u)) rgba(60, 36, 22, 0.2));
}

/* galinha ao lado do tabuleiro no layout em pé (só quando cabe) */
body:not(.land) #hud .hen.side {
  display: block;
  position: fixed;
  margin: 0;
  animation: henIdle 2.6s ease-in-out infinite;
}
body:not(.land) #hud .hen.side.cheer {
  animation:
    henCheer 560ms cubic-bezier(0.3, 1.5, 0.5, 1),
    henIdle 2.6s ease-in-out 560ms infinite;
}
body:not(.land) #hud .hen.side.swap {
  animation:
    henSwap 240ms cubic-bezier(0.3, 1.6, 0.5, 1),
    henIdle 2.6s ease-in-out 240ms infinite;
}
/* galinha maior no painel do desktop */
body.land #hud .hen {
  width: min(100%, 34vh);
}
/* botão Jogar: maior, brilho que passa devagar, respira; sem risquinhos */
#home .play {
  font-size: calc(44 * var(--u));
  padding: calc(16 * var(--u)) calc(70 * var(--u));
  border-radius: calc(30 * var(--u));
  overflow: hidden;
  isolation: isolate;
}
#home .play::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 30%;
  left: -40%;
  right: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-18deg);
  animation: playShine 3.2s ease-in-out 1.2s infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes playShine {
  0%,
  62% {
    left: -40%;
  }
  100% {
    left: 120%;
  }
}
@keyframes playPulse {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.05);
  }
  55% {
    transform: scale(1.035);
  }
}
#home .play:active {
  transform: translateY(calc(4 * var(--u))) scale(0.97);
}
/* logo da home com vida: entra quicando e balança de leve */
#home .logo {
  animation:
    logoIn 700ms cubic-bezier(0.2, 1.6, 0.4, 1) both,
    logoIdle 3.4s ease-in-out 800ms infinite;
  transform-origin: 50% 90%;
}
@keyframes logoIdle {
  0%,
  100% {
    transform: rotate(0) scale(1);
  }
  25% {
    transform: rotate(-2deg) scale(1.02, 0.98);
  }
  50% {
    transform: rotate(0) scale(0.99, 1.02);
  }
  75% {
    transform: rotate(2deg) scale(1.02, 0.98);
  }
}
body.land #home .logo {
  width: auto;
  height: min(40vh, calc(300 * var(--u)));
}
body.land #home .logo {
  height: min(35vh, calc(270 * var(--u)));
}
/* número do ovo chocado: na casca de baixo, com contorno claro para ler sobre a rachadura */
#home .egg.done .n {
  top: 52% !important;
  height: 24%;
  font-size: calc(26 * var(--u)) !important;
  text-shadow:
    0 0 calc(3 * var(--u)) #fff,
    0 0 calc(3 * var(--u)) #fff,
    0 calc(1.5 * var(--u)) 0 #fff;
}
#home .egg.done .n {
  top: 49% !important;
  font-size: calc(30 * var(--u)) !important;
}
/* desfazer: botão redondo (no celular fica no canto de baixo do tabuleiro) */
.btn.round.undo svg {
  width: 58%;
  height: 58%;
}
.btn.round.undo.float {
  position: fixed;
  width: calc(46 * var(--u));
  height: calc(46 * var(--u));
  z-index: 3;
}
.btn.round.undo:disabled {
  opacity: 0.55;
  filter: grayscale(0.6);
}
/* selo de combo sobe e some; contador de moedas pula quando a moeda chega */
.combo {
  position: absolute;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: calc(40 * var(--u));
  color: #ffd93b;
  -webkit-text-stroke: calc(7 * var(--u)) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(4 * var(--u)) 0 var(--ink);
  pointer-events: none;
  animation: comboUp 900ms cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
@keyframes comboUp {
  0% {
    scale: 0.4;
    opacity: 0;
  }
  25% {
    scale: 1.15;
    opacity: 1;
  }
  40% {
    scale: 1;
  }
  75% {
    opacity: 1;
    translate: 0 calc(-26 * var(--u));
  }
  100% {
    opacity: 0;
    translate: 0 calc(-40 * var(--u));
  }
}
.bump {
  animation: pillBump 260ms cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes pillBump {
  40% {
    scale: 1.1;
  }
}
.plus {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-weight: 700;
  font-size: calc(22 * var(--u));
  color: #fff;
  -webkit-text-stroke: calc(5 * var(--u)) var(--ink);
  paint-order: stroke fill;
  pointer-events: none;
  animation: plusUp 1.1s ease-out both;
}
.plus img {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
@keyframes plusUp {
  0% {
    opacity: 0;
    translate: 0 calc(8 * var(--u));
  }
  20% {
    opacity: 1;
    translate: 0 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 0 calc(-10 * var(--u));
  }
}
body.reduced .combo,
body.reduced .plus {
  animation-duration: 900ms !important;
}
@keyframes comboUp {
  0% {
    scale: 0.8;
    opacity: 0;
  }
  29% {
    scale: 1.1;
    opacity: 1;
  }
  40% {
    scale: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 0 calc(-26 * var(--u)); /* sobe enquanto some: o tabuleiro não fica parado com o número */
  }
}
.combo {
  animation-duration: 600ms;
  animation-timing-function: ease-out;
}
.combo {
  animation-duration: 460ms;
}
.combo {
  animation-duration: 410ms;
}
@keyframes comboUp {
  0% {
    scale: 0.8;
    opacity: 0;
  }
  29% {
    scale: 1.1;
    opacity: 1;
  }
  40% {
    scale: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* deslizante de volume */
.toggle.slider {
  gap: calc(10 * var(--u));
}
.toggle.slider > span:first-child {
  flex: 0 0 calc(130 * var(--u));
}
.toggle.slider .vol {
  flex: 0 0 auto;
  min-width: calc(46 * var(--u));
  white-space: nowrap;
  text-align: right;
  font-size: calc(16 * var(--u));
  opacity: 0.75;
}
.toggle.slider input[type='range'] {
  flex: 1 1 auto;
  -webkit-appearance: none;
  appearance: none;
  height: calc(14 * var(--u));
  border-radius: 99px;
  border: calc(2.5 * var(--u)) solid var(--ink);
  background: linear-gradient(90deg, var(--green) var(--p, 100%), #e8d9bd var(--p, 100%));
  pointer-events: auto;
  cursor: pointer;
  margin: 0;
  touch-action: none;
}
.toggle.slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: #fff;
  border: calc(3 * var(--u)) solid var(--ink);
  box-shadow: 0 calc(2 * var(--u)) 0 var(--ink);
}
.toggle.slider input[type='range']::-moz-range-thumb {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  background: #fff;
  border: calc(3 * var(--u)) solid var(--ink);
}
#ui input {
  pointer-events: auto;
}
.toggle.slider > span:first-child {
  flex: 0 0 auto;
  min-width: calc(92 * var(--u));
  text-align: left;
}
.toggle.slider .vol {
  flex: 0 0 calc(40 * var(--u));
  font-size: calc(14 * var(--u));
}
.btn.round.undo.float {
  z-index: auto;
}

/* ---------- menu (home) ---------- */
#home .top .pills {
  display: flex;
  gap: calc(8 * var(--u));
}
.feathers-pill svg {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
}
#home .grow {
  flex: 1 1 auto;
}
#home .bottom {
  padding-bottom: calc(var(--sab) + 60 * var(--u)) !important;
  gap: calc(16 * var(--u)) !important;
}
#home .chicks-btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  font-size: calc(26 * var(--u));
  padding: calc(8 * var(--u)) calc(26 * var(--u)) calc(8 * var(--u)) calc(14 * var(--u));
}
#home .chicks-btn img {
  width: calc(40 * var(--u));
  height: calc(40 * var(--u));
}
#home .chicks-btn .dot {
  position: absolute;
  right: calc(-6 * var(--u));
  top: calc(-6 * var(--u));
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  background: #ff5f6d;
  border: calc(3 * var(--u)) solid var(--ink);
  animation: buddy2 1.2s ease-in-out infinite;
}
body.land #home .logo {
  height: min(46vh, calc(340 * var(--u))) !important;
}

/* ---------- telas com rolagem (fases, coleção) ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.screen .top {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(var(--sat) + 12 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u));
}
.screen .top .title {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 700;
  font-size: calc(32 * var(--u));
  color: #fff;
  -webkit-text-stroke: calc(6 * var(--u)) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(4 * var(--u)) 0 var(--ink);
}
.screen .top .pills {
  display: flex;
  gap: calc(8 * var(--u));
}
.screen .btn.back svg {
  width: 60%;
  height: 60%;
}
.screen .scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(var(--sab) + 30 * var(--u));
  scrollbar-width: thin;
}
.world {
  max-width: calc(760 * var(--u));
  margin: 0 auto calc(26 * var(--u));
}
.world .ribbon {
  margin: calc(6 * var(--u)) auto calc(12 * var(--u));
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(#ff9a8a, #f2665a);
  color: #fff;
  font-weight: 700;
  font-size: calc(26 * var(--u));
  padding: calc(4 * var(--u)) calc(30 * var(--u)) calc(6 * var(--u));
  border: calc(3.5 * var(--u)) solid var(--ink);
  border-radius: calc(14 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) 0 var(--ink);
  -webkit-text-stroke: calc(4 * var(--u)) var(--ink);
  paint-order: stroke fill;
  line-height: 1.05;
}
.world .ribbon small {
  font-size: calc(14 * var(--u));
  -webkit-text-stroke: calc(3 * var(--u)) var(--ink);
  opacity: 0.95;
}
.world .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(84 * var(--u)), 1fr));
  gap: calc(6 * var(--u)) calc(4 * var(--u));
}
.lvegg {
  position: relative;
  border: 0;
  background: none;
  padding: 0;
  aspect-ratio: 300 / 291;
  cursor: pointer;
  transition: transform 120ms;
}
.lvegg img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(2 * var(--u)) rgba(60, 36, 22, 0.3));
}
.lvegg .n {
  position: absolute;
  left: 0;
  right: 0;
  top: 24%;
  text-align: center;
  font-weight: 700;
  font-size: calc(24 * var(--u));
  color: #5a3418;
  text-shadow:
    0 0 calc(3 * var(--u)) #fff,
    0 calc(1 * var(--u)) 0 #fff;
  pointer-events: none;
}
.lvegg.done .n {
  top: 41%;
  font-size: calc(22 * var(--u));
}
.lvegg.locked img {
  filter: saturate(0.6) brightness(0.92) drop-shadow(0 calc(3 * var(--u)) calc(2 * var(--u)) rgba(60, 36, 22, 0.2));
}
.lvegg.locked .n {
  opacity: 0.6;
}
.lvegg.cur {
  animation: eggPulse2 1.8s ease-in-out infinite;
  z-index: 1;
}
.lvegg.cur img {
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgba(255, 240, 150, 1))
    drop-shadow(0 calc(3 * var(--u)) calc(2 * var(--u)) rgba(60, 36, 22, 0.3));
}
.lvegg.hard::after {
  content: '';
  position: absolute;
  right: 12%;
  top: 6%;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  border-radius: 50%;
  background: #ff8fc3;
  border: calc(2.5 * var(--u)) solid var(--ink);
}
@keyframes eggPulse2 {
  50% {
    transform: scale(1.07);
  }
}
@media (hover: hover) {
  .lvegg:not(.locked):hover {
    transform: translateY(calc(-4 * var(--u))) rotate(-3deg);
  }
}
.lvegg:active {
  transform: scale(0.94);
}
.pill.soon {
  margin: 0 auto;
  width: fit-content;
}

/* ---------- coleção ---------- */
#chicks .cards {
  max-width: calc(760 * var(--u));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(110 * var(--u)), 1fr));
  gap: calc(12 * var(--u));
}
.ccard {
  background: linear-gradient(#fffaf0, #fbedd2);
  border: calc(3.5 * var(--u)) solid var(--ink);
  border-radius: calc(18 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) 0 var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
}
.ccard .pic {
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
}
.ccard.got .pic {
  animation: henIdle 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.ccard:not(.got) {
  background: linear-gradient(#f4ead6, #e8d6b4); /* opaco: o fundo da colmeia não vaza pelo cartão */
}
.ccard:not(.got) .pic {
  opacity: 0.55; /* silhueta mais clara: dá curiosidade sem parecer tela vazia */
}
.ccard .cname {
  font-weight: 700;
  font-size: calc(16 * var(--u));
}
#chicks .bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) 0 calc(var(--sab) + 18 * var(--u));
  pointer-events: none;
}
#chicks .bottom .btn {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
}
#chicks .hatch .cost {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  font-size: 0.75em;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 99px;
  padding: 0 calc(12 * var(--u)) 0 calc(6 * var(--u));
  -webkit-text-stroke: 0;
  text-shadow: none;
  color: #fff;
}
#chicks .hatch .cost svg {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}
#chicks .hint2 {
  font-size: calc(17 * var(--u));
}
.hatchveil .hatchbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12 * var(--u));
  pointer-events: auto;
}
.hatchveil .hegg {
  width: calc(180 * var(--u));
  animation: eggShake 950ms ease-in-out both;
}
@keyframes eggShake {
  0%,
  100% {
    rotate: 0deg;
  }
  15% {
    rotate: -8deg;
  }
  30% {
    rotate: 7deg;
  }
  45% {
    rotate: -10deg;
  }
  60% {
    rotate: 9deg;
  }
  75% {
    rotate: -12deg;
    scale: 1.04;
  }
  90% {
    rotate: 10deg;
    scale: 1.08;
  }
}
.hatchveil .hpic canvas {
  width: calc(220 * var(--u));
  height: calc(220 * var(--u));
  animation: trioIn 600ms cubic-bezier(0.2, 1.7, 0.4, 1) both;
}
.hatchveil .hstamp {
  font-size: calc(48 * var(--u));
  font-weight: 700;
  color: #ffd93b;
  -webkit-text-stroke: calc(8 * var(--u)) var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 calc(5 * var(--u)) 0 var(--ink);
  animation: stamp 380ms ease-out both;
}
.hatchveil .hname {
  font-size: calc(30 * var(--u));
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: calc(5 * var(--u)) var(--ink);
  paint-order: stroke fill;
}
.win .card .fgain {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  font-weight: 700;
  font-size: calc(18 * var(--u));
  opacity: 0.85;
}
.win .card .fgain svg {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
}
.screen .top .title {
  white-space: nowrap;
  font-size: clamp(20px, calc(30 * var(--u)), 40px);
  overflow: hidden;
  text-overflow: ellipsis;
}
body:not(.land) .screen .top .title {
  font-size: calc(24 * var(--u));
  -webkit-text-stroke-width: calc(5 * var(--u));
}
/* painel creme atrás dos ovos para ler sobre o galinheiro */
.world .grid {
  background: rgba(255, 246, 227, 0.62);
  border: calc(3 * var(--u)) solid rgba(58, 36, 22, 0.55);
  border-radius: calc(22 * var(--u));
  padding: calc(10 * var(--u)) calc(8 * var(--u));
  box-shadow: 0 calc(4 * var(--u)) 0 rgba(58, 36, 22, 0.35);
}
body.land .world .grid {
  grid-template-columns: repeat(auto-fill, minmax(calc(96 * var(--u)), 1fr));
}

/* qualidade reduzida (celular fraco): sem sombras com filtro e sem animações decorativas */
body.lowfx img,
body.lowfx .lvegg img,
body.lowfx .booster img {
  filter: none !important;
}
body.lowfx #home .logo,
body.lowfx #hud .hen,
body.lowfx .hen-home,
body.lowfx .ccard .pic,
body.lowfx .win .rays {
  animation: none !important;
}
body.lowfx .veil {
  backdrop-filter: none !important;
}

/* combo: estoura (0 -> 1,25 -> 1), sobe 24 px e some */
.combo {
  animation: comboPop 620ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes comboPop {
  0% { scale: 0; opacity: 0; translate: 0 0; }
  25% { scale: 1.25; opacity: 1; }
  38% { scale: 1; translate: 0 -4px; }
  52% { scale: 1.12; }
  64% { scale: 1; opacity: 1; }
  100% { opacity: 0; translate: 0 -36px; scale: 1; }
}
.combo.boostname {
  font-size: calc(34 * var(--u)); /* .combo já tem tamanho fixo; em relativo ficava minúsculo */
  -webkit-text-stroke: calc(6 * var(--u)) var(--ink);
  paint-order: stroke fill;
  white-space: nowrap;
  animation: boostPop 1000ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@keyframes boostPop {
  0% { scale: 0; opacity: 0; translate: 0 0; }
  22% { scale: 1.25; opacity: 1; }
  32% { scale: 1; translate: 0 0; }
  62% { opacity: 1; translate: 0 -6px; }
  100% { opacity: 0; translate: 0 -28px; scale: 1; }
}
/* vitória: o botão de seguir respira depois de 1,5 s */
.modal .btn.go {
  animation: goPulse 1.4s ease-in-out 1.5s infinite;
}
@keyframes goPulse {
  0%, 100% { scale: 1; }
  50% { scale: 1.05; }
}

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