/* ==========================================================================
   HB — поздравлялка. Мобайл-фёрст, всё локально.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  background: #1b0630;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

/* --------------------------------------------------------------------------
   Фон: живые градиентные пятна
   -------------------------------------------------------------------------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #3d0b5c 0%, #1b0630 60%, #12041f 100%);
}

.bg__blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}

.bg__blob--1 {
  background: radial-gradient(circle at 50% 50%, #ff3d8b 0%, rgba(255, 61, 139, 0) 70%);
  top: -30vmax;
  left: -25vmax;
  animation: drift1 26s ease-in-out infinite;
}

.bg__blob--2 {
  background: radial-gradient(circle at 50% 50%, #7b5cff 0%, rgba(123, 92, 255, 0) 70%);
  bottom: -35vmax;
  right: -28vmax;
  animation: drift2 32s ease-in-out infinite;
}

.bg__blob--3 {
  background: radial-gradient(circle at 50% 50%, #ffab5e 0%, rgba(255, 171, 94, 0) 70%);
  bottom: -20vmax;
  left: -20vmax;
  opacity: 0.35;
  animation: drift3 38s ease-in-out infinite;
}

@keyframes drift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(14vw, 10vh, 0) scale(1.15); }
}

@keyframes drift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.1); }
  50%      { transform: translate3d(-16vw, -12vh, 0) scale(1); }
}

@keyframes drift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(18vw, -8vh, 0) scale(1.2); }
}

/* --------------------------------------------------------------------------
   Каркас
   -------------------------------------------------------------------------- */

.app {
  position: fixed;
  inset: 0;
  z-index: 2;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(24px + env(safe-area-inset-top)) 20px
    calc(28px + env(safe-area-inset-bottom));
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s;
}

.screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 460px;
  margin: auto;
}

/* --------------------------------------------------------------------------
   Типографика
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.title {
  font-size: clamp(30px, 9vw, 46px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

.title--xl {
  font-size: clamp(36px, 12vw, 62px);
}

.title--sm {
  font-size: clamp(24px, 7vw, 34px);
}

.sub {
  font-size: clamp(15px, 4.3vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}

.hint {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  max-width: 32ch;
}

.emoji-hero {
  font-size: clamp(64px, 22vw, 108px);
  line-height: 1;
  display: block;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
  animation: bob 2.6s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-12px) rotate(3deg); }
}

.gradient-text {
  background: linear-gradient(100deg, #ffd76e 0%, #ff7ab8 45%, #9d7bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 16px 34px;
  border-radius: 999px;
  font-size: clamp(17px, 4.8vw, 20px);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #2a0b1d;
  background: linear-gradient(135deg, #ffd36e 0%, #ff5fa2 55%, #b06bff 100%);
  box-shadow: 0 14px 34px rgba(255, 61, 139, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.2s ease, opacity 0.2s ease;
}

.btn:active {
  transform: scale(0.95);
  box-shadow: 0 6px 18px rgba(255, 61, 139, 0.3);
}

.btn--ghost {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--sm {
  min-height: 46px;
  padding: 12px 22px;
  font-size: 15px;
}

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Экран 1 — просьба включить звук
   -------------------------------------------------------------------------- */

.sound-ask {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  padding: 14px 18px;
  border-radius: 20px;
  text-align: left;
  background: rgba(255, 211, 110, 0.1);
  border: 1.5px solid rgba(255, 211, 110, 0.38);
  box-shadow: 0 0 24px rgba(255, 211, 110, 0.12);
}

.sound-ask__icon {
  flex: none;
  font-size: 30px;
  line-height: 1;
  animation: speakerPulse 1.9s ease-in-out infinite;
}

@keyframes speakerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

.sound-ask__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sound-ask__text b {
  font-size: 16px;
  font-weight: 800;
  color: #ffd76e;
}

.sound-ask__text span {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   Экран 2 — «ты козлик?»
   -------------------------------------------------------------------------- */

.answers {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 320px;
}

.no-slot {
  display: flex;
  justify-content: center;
  min-height: 60px;
}

#noBtn {
  z-index: 40;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1),
    left 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease, scale 0.25s ease;
}

#noBtn.is-loose {
  position: fixed;
  margin: 0;
}

#noBtn.is-gone {
  opacity: 0;
  scale: 0.3;
  pointer-events: none;
}

.taunt {
  min-height: 26px;
  font-size: 15px;
  font-weight: 700;
  color: #ffd76e;
  margin: 0;
}

.taunt.is-pop {
  animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Экран 4 — поймай подарок
   -------------------------------------------------------------------------- */

.gift-field {
  position: relative;
  width: 100%;
  height: min(46vh, 340px);
  border-radius: 26px;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.gift-item {
  position: absolute;
  font-size: 46px;
  line-height: 1;
  padding: 6px;
  user-select: none;
  -webkit-user-select: none;
  transition: left 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s ease,
    opacity 0.25s ease;
}

.gift-item.is-poof {
  transform: scale(1.9) rotate(20deg);
  opacity: 0;
}

.counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Экран 5 — лови тортики
   -------------------------------------------------------------------------- */

.game-hud {
  display: flex;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

.game-field {
  position: relative;
  width: 100%;
  height: min(52vh, 400px);
  border-radius: 26px;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  overflow: hidden;
  touch-action: manipulation;
}

.faller {
  position: absolute;
  font-size: 40px;
  line-height: 1;
  padding: 8px;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.faller.is-hit {
  animation: hit 0.35s ease forwards;
  pointer-events: none;
}

@keyframes hit {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2) rotate(25deg); opacity: 0; }
}

/* тряска всего экрана — три степени по мере разгона */
.is-shake-1 { animation: shake1 0.42s linear infinite; }
.is-shake-2 { animation: shake2 0.3s linear infinite; }
.is-shake-3 { animation: shake3 0.19s linear infinite; }

@keyframes shake1 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(-1.5px, 1px, 0); }
  50%      { transform: translate3d(1.5px, -1px, 0); }
  75%      { transform: translate3d(1px, 1.5px, 0); }
}

@keyframes shake2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  20%      { transform: translate3d(-3px, 2px, 0) rotate(-0.25deg); }
  40%      { transform: translate3d(3px, -2px, 0) rotate(0.25deg); }
  60%      { transform: translate3d(-2px, -3px, 0) rotate(-0.15deg); }
  80%      { transform: translate3d(3px, 2px, 0) rotate(0.2deg); }
}

@keyframes shake3 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  15%      { transform: translate3d(-6px, 3px, 0) rotate(-0.5deg); }
  30%      { transform: translate3d(6px, -4px, 0) rotate(0.5deg); }
  45%      { transform: translate3d(-5px, -5px, 0) rotate(-0.4deg); }
  60%      { transform: translate3d(6px, 4px, 0) rotate(0.45deg); }
  80%      { transform: translate3d(-4px, 5px, 0) rotate(-0.3deg); }
}

/* полноэкранный выкрик «БЫСТРЕЕ!» */
.shout {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  pointer-events: none;
  opacity: 0;
  font-size: clamp(42px, 15vw, 96px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 18px rgba(255, 95, 162, 0.9),
    0 0 44px rgba(176, 107, 255, 0.7),
    0 8px 26px rgba(0, 0, 0, 0.6);
}

.shout.is-on {
  animation: shoutFly 1.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes shoutFly {
  0%   { opacity: 0; transform: translateX(75vw) scale(0.55) rotate(9deg); }
  18%  { opacity: 1; transform: translateX(0) scale(1.22) rotate(-3deg); }
  30%  { opacity: 1; transform: translateX(0) scale(0.97) rotate(1deg); }
  38%  { opacity: 1; transform: translateX(0) scale(1.05) rotate(0deg); }
  70%  { opacity: 1; transform: translateX(0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translateX(-80vw) scale(0.6) rotate(-10deg); }
}

.float-score {
  position: absolute;
  font-size: 22px;
  font-weight: 900;
  pointer-events: none;
  animation: floatUp 0.7s ease forwards;
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(0.8); opacity: 1; }
  100% { transform: translateY(-60px) scale(1.2); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Экран 6 — фейковая загрузка
   -------------------------------------------------------------------------- */

.progress {
  width: 100%;
  max-width: 340px;
  height: 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd36e, #ff5fa2, #b06bff);
  transition: width 0.3s ease;
}

.progress-wrap.is-glitch {
  animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) 3;
}

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.status-line {
  min-height: 24px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.error-box {
  padding: 16px 20px;
  border-radius: 18px;
  border: 1.5px solid rgba(255, 90, 90, 0.45);
  background: rgba(255, 60, 60, 0.12);
  font-weight: 700;
  color: #ffb3b3;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Экран 6.5 — танец
   -------------------------------------------------------------------------- */

.dance-stage {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.dance-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dance-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}

/* --------------------------------------------------------------------------
   Экран 6.7 — «маме скинуть?»
   -------------------------------------------------------------------------- */

/* общая механика «фото под блюром, открывается тапом» */
.tap-photo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform: rotate(-1.5deg);
}

.tap-photo img {
  display: block;
  width: 100%;
  /* до тапа не разглядеть; scale — чтобы блюр не оголял края */
  filter: blur(24px) brightness(0.5);
  transform: scale(1.18);
  transition: filter 0.6s ease, transform 0.6s ease;
}

.tap-photo.is-open img {
  filter: none;
  transform: none;
}

.mom-photo {
  max-width: 240px;
}

.mom-photo img {
  height: 40vh;
  max-height: 380px;
  object-fit: cover;
  object-position: center 30%;
}

.wish-photo {
  max-width: 330px;
  transform: rotate(1.5deg);
}

.wish-photo img {
  height: auto;
  aspect-ratio: 900 / 384;
  object-fit: cover;
}

.tap-photo__cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  transition: opacity 0.4s ease;
}

.tap-photo__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: shimmer 2.8s ease-in-out infinite;
}

.tap-photo.is-open .tap-photo__cover {
  opacity: 0;
  pointer-events: none;
}

/* плашка-спойлер: текст под блюром, открывается тапом */
.spoiler {
  position: relative;
  display: block;
  width: 100%;
  max-width: 340px;
  min-height: 62px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.spoiler__text {
  display: block;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: #ffe9a8;
  filter: blur(9px);
  opacity: 0.4;
  transition: filter 0.45s ease, opacity 0.45s ease;
}

.spoiler__cover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(27, 6, 48, 0.5);
  transition: opacity 0.4s ease;
}

.spoiler__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: shimmer 2.8s ease-in-out infinite;
}

.spoiler.is-open .spoiler__text {
  filter: none;
  opacity: 1;
}

.spoiler.is-open .spoiler__cover {
  opacity: 0;
  pointer-events: none;
}

.signoff {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.42);
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Экран 7 — камера
   -------------------------------------------------------------------------- */

.cam-stage {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.4);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.cam-stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
  background: #000;
}

.cam-stage__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cam-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.cam-badge span {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.countdown {
  font-size: clamp(80px, 30vw, 150px);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  animation: countPop 0.7s ease;
}

@keyframes countPop {
  0%   { transform: scale(0.4); opacity: 0; }
  30%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.flash {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.flash.is-on {
  animation: flash 0.5s ease;
}

@keyframes flash {
  0%   { opacity: 0; }
  12%  { opacity: 0.95; }
  100% { opacity: 0; }
}

.smile-meter {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.smile-meter__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7b5cff, #ff5fa2, #ffd36e);
  transition: width 0.12s linear;
}

.smile-meter__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.smile-meter__goal {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.privacy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(80, 255, 180, 0.1);
  border: 1px solid rgba(80, 255, 180, 0.28);
  color: #9dffd8;
  font-size: 12.5px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Экран 8 — фото
   -------------------------------------------------------------------------- */

.polaroid {
  width: 100%;
  max-width: 320px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  transform: rotate(-2deg);
  animation: dropIn 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dropIn {
  0%   { transform: translateY(-40px) rotate(8deg) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) rotate(-2deg) scale(1); opacity: 1; }
}

.polaroid img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Экран 9 — финал
   -------------------------------------------------------------------------- */

.final-emoji {
  font-size: clamp(54px, 18vw, 100px);
  line-height: 1;
  display: block;
  animation: bob 3s ease-in-out infinite;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.4));
}

/* финал самый плотный экран — поджимаем, чтобы влезал без скролла
   в реальную высоту Safari с адресной строкой */
#s-final .screen__inner {
  gap: 9px;
}

/* заголовок тут в три строки — самый жирный кусок высоты */
#s-final .title {
  font-size: clamp(31px, 10.4vw, 56px);
}

.compliment {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  font-size: clamp(15px, 4.3vw, 18px);
  font-weight: 700;
  line-height: 1.4;
  color: #ffe9a8;
  max-width: 34ch;
  text-wrap: pretty;
}

.compliment.is-pop {
  animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* кнопка «Тык» с тычущими в неё со всех сторон пальцами */
.tyk {
  position: relative;
  display: inline-flex;
  padding: 32px 38px;
}

.tyk__arrow {
  position: absolute;
  font-size: 24px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

.tyk__arrow--t1 { top: 2px;  left: 16%; animation: nudgeDown 1.1s ease-in-out infinite; }
.tyk__arrow--t2 { top: -2px; left: 50%; margin-left: -13px;
                  animation: nudgeDown 1.1s ease-in-out 0.18s infinite; }
.tyk__arrow--t3 { top: 2px;  right: 16%; animation: nudgeDown 1.1s ease-in-out 0.36s infinite; }

.tyk__arrow--b1 { bottom: 2px;  left: 16%; animation: nudgeUp 1.1s ease-in-out 0.1s infinite; }
.tyk__arrow--b2 { bottom: -2px; left: 50%; margin-left: -13px;
                  animation: nudgeUp 1.1s ease-in-out 0.28s infinite; }
.tyk__arrow--b3 { bottom: 2px;  right: 16%; animation: nudgeUp 1.1s ease-in-out 0.46s infinite; }

.tyk__arrow--l { left: 0;  top: 50%; margin-top: -13px;
                 animation: nudgeRight 1.1s ease-in-out 0.06s infinite; }
.tyk__arrow--r { right: 0; top: 50%; margin-top: -13px;
                 animation: nudgeLeft 1.1s ease-in-out 0.24s infinite; }

/* амплитуда небольшая: палец должен дотягиваться до края кнопки,
   а не наезжать на её текст */
@keyframes nudgeDown  { 0%, 100% { transform: translateY(0); }  50% { transform: translateY(6px); } }
@keyframes nudgeUp    { 0%, 100% { transform: translateY(0); }  50% { transform: translateY(-6px); } }
@keyframes nudgeRight { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(6px); } }
@keyframes nudgeLeft  { 0%, 100% { transform: translateX(0); }  50% { transform: translateX(-6px); } }

@media (max-width: 360px) {
  .tyk { padding: 30px 30px; }
  .tyk__arrow { font-size: 21px; }
  #s-final .screen__inner { gap: 10px; }
  .final-emoji { font-size: 52px; }
}

/* --------------------------------------------------------------------------
   Оверлеи
   -------------------------------------------------------------------------- */

.fx-canvas {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* фоновая текстура — строго ПОД контентом, иначе текст не прочитать */
.rain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.rain__drop {
  position: absolute;
  top: -12vh;
  font-size: 26px;
  line-height: 1;
  opacity: 0.3;
  animation: fall linear forwards;
}

@keyframes fall {
  0%   { transform: translateY(-12vh) rotate(0deg); }
  100% { transform: translateY(115vh) rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Полоска прогресса сверху
   -------------------------------------------------------------------------- */

.progress-top {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 65;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.progress-top__fill {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #ffd36e 0%, #ff5fa2 55%, #b06bff 100%);
  box-shadow: 0 0 14px rgba(255, 95, 162, 0.75), 0 0 32px rgba(176, 107, 255, 0.45);
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible;
}

/* пробегающий блик */
.progress-top__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  animation: shimmer 2.6s ease-in-out infinite;
}

@keyframes shimmer {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(200%); }
}

/* светящаяся голова полоски */
.progress-top__head {
  position: absolute;
  right: -2px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  box-shadow: 0 0 10px #fff, 0 0 22px #ff5fa2, 0 0 34px #b06bff;
  transition: opacity 0.3s ease;
}

.progress-top.is-started .progress-top__head {
  opacity: 1;
}

.progress-top.is-bump .progress-top__fill {
  animation: barBump 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes barBump {
  0%   { filter: brightness(1); }
  35%  { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .progress-top__fill::after { animation: none; }
}

.sound-toggle {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 70;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #ff7ab8;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.is-hidden {
  display: none !important;
}

.is-pop {
  animation: pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .bg__blob,
  .emoji-hero,
  .final-emoji,
  .sound-ask__icon,
  .tyk__arrow {
    animation: none;
  }
}