/* =====================================================================
   I LOVE VLADA — стили
   Эстетика: тёплое любовное письмо + сказка. Mobile-first.
   ===================================================================== */

:root{
  /* палитра */
  --cream:      #FFF7F2;
  --blush:      #FDE7EC;
  --peach:      #FCE3D4;
  --rose:       #E8688B;
  --rose-deep:  #C74B6E;
  --gold:       #D9A66C;
  --gold-soft:  #EAC79A;
  --ink:        #4A2F3A;
  --ink-soft:   #8A6B76;
  --card:       #FFFDFB;
  --line:       #F2D6DE;

  /* шрифты */
  --font-display: "Cormorant Garamond","Playfair Display",Georgia,serif;
  --font-body:    "Nunito","Segoe UI",system-ui,sans-serif;
  --font-hand:    "Caveat","Segoe Script",cursive;

  /* радиусы */
  --radius-lg: 26px;
  --radius:    22px;
  --radius-sm: 14px;
  --pill:      999px;

  /* ритм отступов */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* тени — мягкие, многослойные */
  --shadow-soft: 0 10px 30px -14px rgba(199,75,110,.35);
  --shadow-card:
    0 2px 4px rgba(120,50,70,.05),
    0 22px 50px -26px rgba(120,50,70,.34);
  --shadow-btn:  0 12px 24px -12px rgba(199,75,110,.7);

  /* плавность */
  --ease-out:    cubic-bezier(.22,.68,.32,1);
  --ease-spring: cubic-bezier(.2,.85,.3,1.25);
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html,body{ height:100%; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--blush);
  overflow:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ------------------- ФОН ------------------- */
.bg-layer{ position:fixed; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--cream) 0%, var(--blush) 45%, var(--peach) 100%);
}
.bg-glow{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.bg-glow--1{ width:60vw; height:60vw; background:#FBD5DE; top:-10vw; left:-15vw; }
.bg-glow--2{ width:55vw; height:55vw; background:#F8E4C9; bottom:-12vw; right:-12vw; }

.hearts{ position:absolute; inset:0; }
.heart{
  position:absolute; bottom:-40px; font-size:18px; opacity:0;
  animation:floatUp linear forwards;
  will-change:transform,opacity; user-select:none;
}
@keyframes floatUp{
  0%{ transform:translateY(0) rotate(0); opacity:0; }
  12%{ opacity:.65; }
  90%{ opacity:.5; }
  100%{ transform:translateY(-112vh) rotate(40deg); opacity:0; }
}

/* ------------------- ТЕЛЕФОННАЯ РАМКА ------------------- */
.phone{
  position:relative; z-index:1;
  width:100%; max-width:440px; min-height:100dvh;
  margin:0 auto; display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
@media (min-width:600px){
  body{ padding:22px 0; background:linear-gradient(160deg,#F4DCE2,#EBD3C6); }
  .phone{
    min-height:auto; height:min(880px,94dvh);
    border-radius:38px; overflow:hidden;
    background:var(--blush);
    box-shadow:0 40px 90px -30px rgba(120,50,70,.55), 0 0 0 10px #fff, 0 0 0 12px #efd4dc;
  }
  .bg-layer{ position:absolute; }
}

/* ------------------- HUD ------------------- */
.hud{
  position:relative; z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:16px 18px 4px;
}
.hud__progress{ display:flex; gap:7px; flex:1; }
.dot{ height:6px; flex:1; border-radius:var(--pill); background:#F0D2DB;
  transition:background .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.dot.done{ background:var(--rose); }
.dot.current{ background:linear-gradient(90deg,var(--rose),var(--gold));
  box-shadow:0 2px 10px -2px rgba(232,104,139,.7); }
.hud__mute{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:var(--rose); box-shadow:var(--shadow-soft);
  font-size:16px; display:grid; place-items:center;
  transition:transform .18s var(--ease-out), box-shadow .2s, color .2s;
}
@media (hover:hover){ .hud__mute:hover{ transform:translateY(-1px) scale(1.06);
  box-shadow:0 10px 20px -8px rgba(199,75,110,.5); } }
.hud__mute:active{ transform:scale(.9); }
.hud__mute.muted{ color:#C9AEB6; }
.hud__mute.muted .ic-sound::after{ content:""; }

/* ------------------- ЭКРАНЫ ------------------- */
.screens{ position:relative; z-index:2; flex:1; }
.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:20px 22px 30px;
  opacity:0; visibility:hidden; transform:translateY(20px) scale(.985);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility .55s;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.screen::-webkit-scrollbar{ width:0; height:0; }
/* Безопасное вертикальное центрирование: контент центрируется, когда есть
   место, и «прижимается» к верху при переполнении — верх всегда доскролливается. */
.screen > .card,
.screen > .intro,
.screen > .game-wrap,
.screen > .finale{ margin-block:auto; }
.screen.is-active{ opacity:1; visibility:visible; transform:none; }

/* ------------------- ТИПОГРАФИКА ------------------- */
.title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(46px,15vw,68px); line-height:.98; letter-spacing:.5px;
  color:var(--rose-deep); text-align:center;
  text-shadow:0 2px 0 #fff, 0 14px 30px rgba(199,75,110,.25);
}
.screen-title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(29px,7.6vw,38px); color:var(--rose-deep);
  text-align:center; line-height:1.06; letter-spacing:.2px; margin-bottom:12px;
}
.screen-title::after{
  content:""; display:block; width:46px; height:2px; margin:11px auto 0; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-soft) 25%,var(--gold) 50%,var(--gold-soft) 75%,transparent);
  opacity:.9;
}
.screen-sub{ text-align:center; color:var(--ink-soft); font-size:15.5px; line-height:1.45; margin-bottom:22px; max-width:34ch; }
.hand{ font-family:var(--font-hand); font-size:27px; color:var(--rose); text-align:center; line-height:1.15; }
.hint{ text-align:center; color:var(--ink-soft); font-size:14px; min-height:20px; margin-top:14px; }

/* ------------------- ИНТРО ------------------- */
.intro{ display:flex; flex-direction:column; align-items:center; gap:15px; width:100%; }
.intro__eyebrow{
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); font-weight:800;
}
.photo-frame{
  position:relative; width:min(72%,244px); aspect-ratio:4/5;
  background:#fff; padding:10px 10px 44px; border-radius:6px;
  box-shadow:var(--shadow-card); transform:rotate(-2.5deg);
  transition:transform .5s var(--ease-spring), box-shadow .4s var(--ease-out);
}
@media (hover:hover){
  .photo-frame:hover{ transform:rotate(0deg) scale(1.02);
    box-shadow:0 30px 60px -26px rgba(120,50,70,.42); }
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; border-radius:3px; display:block; }
.photo-frame__tape{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:96px; height:26px; background:rgba(233,199,154,.55);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.photo-frame::after{
  content:"я тебя люблю"; position:absolute; bottom:11px; left:0; right:0;
  text-align:center; font-family:var(--font-hand); font-size:22px; color:var(--rose);
}
.cat-note{
  display:flex; gap:12px; align-items:flex-start;
  background:linear-gradient(180deg,#fff,#FFFBF9);
  border:1px solid var(--line); border-radius:18px;
  padding:14px 16px; box-shadow:var(--shadow-soft); max-width:344px;
}
.cat-note__ava{ font-size:30px; line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));
  animation:catBob 3.4s ease-in-out infinite; }
@keyframes catBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(-4deg); } }
.cat-note p{ font-size:14.5px; color:var(--ink); line-height:1.46; }

/* ------------------- КАРТОЧКА ------------------- */
.card{
  position:relative; width:100%; max-width:380px;
  background:
    linear-gradient(180deg, #FFFFFF 0%, var(--card) 34%);
  border-radius:var(--radius-lg); padding:26px 24px 28px;
  box-shadow:var(--shadow-card); border:1px solid rgba(255,255,255,.9);
  display:flex; flex-direction:column; align-items:center;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 #fff, inset 0 0 0 1px rgba(242,214,222,.6);
}
.card--wide{ max-width:404px; }
.card__badge{
  font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase; font-weight:800;
  color:var(--gold); background:#FBF1E4; border:1px solid var(--gold-soft);
  padding:6px 14px; border-radius:var(--pill); margin-bottom:16px;
  box-shadow:0 4px 12px -8px rgba(217,166,108,.9);
}
.card__badge--classified{ color:#C0506A; background:#FBE7EC; border-color:#F3C4D0;
  box-shadow:0 4px 12px -8px rgba(199,75,110,.7); }

/* ------------------- ПОЛЯ ------------------- */
.field{
  width:100%; font-family:var(--font-body); font-weight:600; font-size:17px; color:var(--ink);
  background:#FFF8F5; border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:15px 16px; text-align:center; margin-bottom:18px; outline:none;
  transition:border-color .2s, box-shadow .25s var(--ease-out), transform .2s var(--ease-out);
}
@media (hover:hover){ .field:hover{ border-color:var(--gold-soft); } }
.field:focus{ border-color:var(--rose); box-shadow:0 0 0 4px rgba(232,104,139,.16); transform:translateY(-1px); }
.field--date{ -webkit-appearance:none; appearance:none; }

/* ------------------- КНОПКИ ------------------- */
.btn{
  position:relative; overflow:hidden;
  font-family:var(--font-body); font-weight:800; font-size:16px; letter-spacing:.2px;
  border:none; border-radius:var(--pill); padding:15px 26px; cursor:pointer;
  transition:transform .18s var(--ease-out), box-shadow .28s var(--ease-out), filter .2s; width:100%;
}
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(232,104,139,.28); }
.btn:active{ transform:scale(.96); }
.btn--primary{
  color:#fff; background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  box-shadow:var(--shadow-btn);
}
/* мягкий диагональный блик по кнопке */
.btn--primary::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); transition:none; pointer-events:none;
}
@media (hover:hover){
  .btn--primary:hover{ transform:translateY(-2px); filter:brightness(1.04);
    box-shadow:0 18px 30px -12px rgba(199,75,110,.75); }
  .btn--primary:hover::after{ animation:sheen .9s var(--ease-out); }
  .btn--ghost:hover{ border-color:var(--rose); color:var(--rose-deep); transform:translateY(-1px); }
}
@keyframes sheen{ from{ left:-60%; } to{ left:120%; } }
.btn--ghost{
  color:var(--rose-deep); background:#fff; border:2px solid var(--line);
  box-shadow:var(--shadow-soft); margin-bottom:14px;
  transition:transform .18s var(--ease-out), border-color .2s, box-shadow .25s;
}
.btn--wood{
  color:#4a2e12; background:linear-gradient(160deg,#E8B96b,#C98a3f);
  box-shadow:0 10px 0 -2px #8f5a22, 0 18px 26px -12px rgba(0,0,0,.5);
  border:2px solid #a86d2e; letter-spacing:.5px;
}
.btn--wood:active{ transform:translateY(4px); box-shadow:0 6px 0 -2px #8f5a22; }

/* ------------------- ИГРА ------------------- */
.screen--game{ padding:14px; }
.game-wrap{ width:100%; max-width:420px; display:flex; flex-direction:column; gap:12px; }
.game-hud{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(160deg,#7CBF3F,#5A9A2E);
  border:3px solid #46781f; border-radius:16px; padding:10px 16px;
  box-shadow:0 8px 0 -2px #3c6a1a, inset 0 2px 6px rgba(255,255,255,.25);
  color:#fff; text-shadow:0 2px 2px rgba(0,0,0,.35);
}
.game-hud__title{ font-family:var(--font-display); font-weight:700; font-size:24px; }
.game-hud__score{ font-size:14px; font-weight:700; }
.game-stage{
  position:relative; width:100%; aspect-ratio:4/5;
  border-radius:18px; overflow:hidden; border:3px solid #46781f;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.4);
}
#gameCanvas{ display:block; width:100%; height:100%; }
.game-overlay{ position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(30,50,20,.45); backdrop-filter:blur(2px); padding:20px; }
.game-overlay[hidden]{ display:none; }
.game-overlay__box{
  background:linear-gradient(160deg,#fffdf6,#f7ead0); border:3px solid #C98a3f;
  border-radius:18px; padding:22px; text-align:center; max-width:300px;
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5);
}
.game-overlay__box h3{ font-family:var(--font-display); font-size:30px; color:#7a4a12; margin-bottom:8px; }
.game-overlay__box p{ font-size:14px; color:#5c4326; margin-bottom:18px; line-height:1.5; }
.game-tip{ text-align:center; color:var(--ink-soft); font-size:13px; }

/* ------------------- МЕМОРИ ------------------- */
.memory{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:100%; margin-bottom:6px; }
.mcard{ aspect-ratio:3/4; perspective:800px; cursor:pointer;
  transition:transform .2s var(--ease-out); }
@media (hover:hover){
  .mcard:not(.flipped):not(.matched):hover{ transform:translateY(-3px); }
  .mcard:not(.flipped):not(.matched):hover .mcard__back{ box-shadow:0 14px 24px -12px rgba(199,75,110,.7); }
}
.mcard:not(.flipped):not(.matched):active{ transform:scale(.95); }
.mcard__inner{ position:relative; width:100%; height:100%;
  transition:transform .55s var(--ease-spring); transform-style:preserve-3d; }
.mcard.flipped .mcard__inner, .mcard.matched .mcard__inner{ transform:rotateY(180deg); }
.mcard__face{ position:absolute; inset:0; border-radius:12px; backface-visibility:hidden;
  overflow:hidden; display:grid; place-items:center; }
.mcard__back{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(150deg,var(--rose),var(--rose-deep));
  color:#fff; font-size:24px;
  border:2px solid rgba(255,255,255,.85); box-shadow:var(--shadow-soft);
}
.mcard__front{ transform:rotateY(180deg); background:#fff; border:2px solid var(--line); }
.mcard__front img{ width:100%; height:100%; object-fit:cover; }
.mcard__front .emoji{ font-size:34px; }
.mcard.matched{ animation:pop .45s var(--ease-spring); }
.mcard.matched .mcard__front{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft), 0 8px 18px -8px rgba(217,166,108,.7); }
@keyframes pop{ 45%{ transform:scale(1.09); } }

/* ------------------- КВИЗ ------------------- */
.quiz{ width:100%; }
.quiz__q{ font-family:var(--font-display); font-weight:600; font-size:24px;
  text-align:center; color:var(--ink); margin-bottom:18px; line-height:1.18; }
.quiz__opts{ display:flex; flex-direction:column; gap:10px; }
.quiz__opt{
  position:relative; overflow:hidden;
  font-family:var(--font-body); font-weight:700; font-size:15.5px; color:var(--ink);
  background:#FFF8F5; border:2px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 18px 14px 20px; cursor:pointer; text-align:left; width:100%;
  transition:border-color .18s, background .18s, transform .16s var(--ease-out), box-shadow .2s;
}
.quiz__opt::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--rose); transform:scaleY(0); transform-origin:center;
  transition:transform .2s var(--ease-out);
}
@media (hover:hover){
  .quiz__opt:hover{ border-color:var(--rose); background:#FFF1F4; transform:translateX(2px);
    box-shadow:0 8px 18px -12px rgba(199,75,110,.6); }
  .quiz__opt:hover::before{ transform:scaleY(.6); }
}
.quiz__opt:active{ transform:scale(.98); }
.quiz__opt.correct{ background:#EAF7EA; border-color:#8FCf8f; color:#3a7a3a; }
.quiz__opt.correct::before{ background:#6BBF6B; transform:scaleY(1); }
.quiz__opt.wrong{ background:#FBE7EC; border-color:#ED9CB0; color:#b04a66; animation:shake .4s; }
.quiz__opt.wrong::before{ background:#E86A86; transform:scaleY(1); }
.quiz-react{ text-align:center; font-family:var(--font-hand); font-size:22px;
  color:var(--rose); min-height:30px; margin-top:14px; }
.quiz-dots{ display:flex; gap:8px; justify-content:center; margin-top:6px; }
.qdot{ width:9px; height:9px; border-radius:50%; background:#F0D2DB; transition:.3s; }
.qdot.done{ background:var(--rose); }
.qdot.current{ background:var(--gold); transform:scale(1.25); }

/* ------------------- МИССИЯ / КОЛЬЦЕМЕР ------------------- */
.mission{ width:100%; text-align:left; font-size:14.5px; line-height:1.55; color:var(--ink); margin-bottom:16px; }
.mission p{ margin-bottom:10px; }
.mission__steps{ list-style:none; margin:10px 0; display:flex; flex-direction:column; gap:9px; counter-reset:step; }
.mission__steps li{ position:relative; padding-left:34px; font-size:14.5px; line-height:1.45; counter-increment:step; }
.mission__steps li::before{
  content:counter(step); position:absolute; left:0; top:-1px;
  width:23px; height:23px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-body); font-size:12.5px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--rose-deep));
  box-shadow:0 5px 10px -5px rgba(199,75,110,.8);
}
.mission__joke{ font-family:var(--font-hand); font-size:20px; color:var(--rose); line-height:1.25; }
.ring-input{ display:flex; align-items:center; justify-content:center; gap:18px; margin:6px 0 18px; }
.stepper{
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  font-size:28px; font-weight:800; color:#fff; line-height:1;
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  box-shadow:0 10px 20px -8px rgba(217,166,108,.85), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .16s var(--ease-out), box-shadow .2s, filter .2s;
}
@media (hover:hover){ .stepper:hover{ transform:translateY(-2px); filter:brightness(1.04);
  box-shadow:0 14px 24px -8px rgba(217,166,108,.95), inset 0 1px 0 rgba(255,255,255,.5); } }
.stepper:active{ transform:scale(.9); }
.ring-value{ display:flex; flex-direction:column; align-items:center; min-width:104px; }
.ring-value b{ display:inline-block; font-family:var(--font-display); font-weight:600;
  font-size:54px; line-height:1; color:var(--rose-deep); }
.ring-value b.bump{ animation:valuePop .32s var(--ease-out); }
.ring-value span{ font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); margin-top:2px; }
.mission__after{ margin-top:18px; padding-top:16px; border-top:1px dashed var(--line);
  text-align:left; width:100%; animation:fadeIn .5s var(--ease-out); }
.mission__after > p{ margin-bottom:10px; }
.mission__after[hidden]{ display:none; }

/* ------------------- ФИНАЛ ------------------- */
.screen--finale{ overflow:hidden; }
.fireworks{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.finale{ position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; gap:14px; text-align:center; width:100%; max-width:360px; }
.finale__title{ font-family:var(--font-display); font-weight:700;
  font-size:clamp(40px,12vw,56px); color:var(--rose-deep); line-height:1; }
.finale__code{ font-weight:800; color:var(--gold); font-size:15px; letter-spacing:.5px; }
.finale__code b{ color:var(--rose-deep); font-size:20px; }
.reward{ width:100%; display:flex; flex-direction:column; gap:12px; align-items:center;
  animation:fadeIn .5s; }
.reward[hidden]{ display:none; }
.scroll{
  width:100%; background:linear-gradient(160deg,#FFFBF3,#F6E7CE);
  border:2px solid var(--gold-soft); border-radius:16px; padding:22px 20px;
  box-shadow:var(--shadow-card); position:relative;
}
.scroll__label{ font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--gold); font-weight:800; margin-bottom:10px; }
.riddle{ font-family:var(--font-display); font-weight:500; font-size:22px;
  line-height:1.4; color:var(--ink); white-space:pre-line; }
.surrender{ margin-top:6px; animation:fadeIn .4s; }
.surrender[hidden]{ display:none; }
.surrender img{ width:100%; max-width:280px; border-radius:14px; box-shadow:var(--shadow-card);
  margin-bottom:10px; background:#fff; min-height:120px; object-fit:cover; }
.surrender p{ font-family:var(--font-hand); font-size:22px; color:var(--rose); }

/* ------------------- МОДАЛКА ------------------- */
.modal{ position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:24px; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(74,47,58,.55); backdrop-filter:blur(3px); }
.modal__box{ position:relative; background:var(--card); border-radius:20px; padding:22px;
  max-width:340px; width:100%; text-align:center; box-shadow:var(--shadow-card); animation:pop .35s; }
.modal__box h3{ font-family:var(--font-display); font-size:26px; color:var(--rose-deep); margin-bottom:12px; }
.modal__box img{ width:100%; border-radius:14px; margin-bottom:12px; background:#F4ECF7; }
.modal__box p{ font-size:14px; color:var(--ink-soft); line-height:1.4; }
.modal__x{ position:absolute; top:10px; right:12px; width:34px; height:34px; border:none;
  background:#F6E5EA; color:var(--rose-deep); border-radius:50%; font-size:22px; cursor:pointer; }

/* ------------------- ЭФФЕКТ "БЕСКОНЕЧНАЯ ЛЮБОВЬ" ------------------- */
.love-burst{ position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden; }
.love-burst__h{ position:absolute; will-change:transform,opacity; transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 8px rgba(199,75,110,.25)); }
.love-burst__inf{
  position:absolute; left:50%; top:50%;
  font-family:var(--font-display); font-weight:700; color:var(--rose-deep);
  font-size:min(46vw,240px); line-height:1;
  text-shadow:0 0 46px rgba(232,104,139,.65), 0 8px 20px rgba(199,75,110,.4);
  animation:infPop 2.9s cubic-bezier(.2,.8,.3,1.1) forwards;
}
@keyframes infPop{
  0%{ transform:translate(-50%,-50%) scale(0) rotate(-25deg); opacity:0; }
  22%{ transform:translate(-50%,-50%) scale(1.18) rotate(0); opacity:1; }
  70%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1.06); opacity:0; }
}

/* ------------------- АНИМАЦИИ ------------------- */
/* Ревилы «спят», пока экран не активен, и проигрываются заново при каждом входе. */
.reveal{ opacity:0; transform:translateY(18px); }
.is-active .reveal{ animation:reveal .75s var(--ease-out) forwards; animation-delay:var(--d,0s); }
@keyframes reveal{ to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }
@keyframes cardIn{ from{ opacity:0; transform:translateY(14px) scale(.92); } to{ opacity:1; transform:none; } }
@keyframes optIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes valuePop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.22); } 100%{ transform:scale(1); } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.05ms!important; }
  .reveal{ opacity:1!important; transform:none!important; }
  .heart, .bg-glow, .cat-note__ava{ animation:none!important; }
  .screen{ scroll-behavior:auto; }
}

/* =====================================================================
   ПОЛИРОВКА · ДИНАМИКА · МИКРОВЗАИМОДЕЙСТВИЯ
   ===================================================================== */

/* Медленный дрейф фоновых бликов (только transform — дёшево для GPU). */
.bg-glow{ will-change:transform; }
.bg-glow--1{ animation:drift1 26s ease-in-out infinite alternate; }
.bg-glow--2{ animation:drift2 31s ease-in-out infinite alternate; }
@keyframes drift1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(6vw,4vh) scale(1.08); } }
@keyframes drift2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-5vw,-3vh) scale(1.06); } }

/* Мемори: мягкое каскадное появление карточек при входе на экран. */
.is-active .mcard:not(.matched){ animation:cardIn .5s var(--ease-out) both; }
.is-active .mcard:nth-child(1){ animation-delay:.16s }
.is-active .mcard:nth-child(2){ animation-delay:.20s }
.is-active .mcard:nth-child(3){ animation-delay:.24s }
.is-active .mcard:nth-child(4){ animation-delay:.28s }
.is-active .mcard:nth-child(5){ animation-delay:.22s }
.is-active .mcard:nth-child(6){ animation-delay:.26s }
.is-active .mcard:nth-child(7){ animation-delay:.30s }
.is-active .mcard:nth-child(8){ animation-delay:.34s }
.is-active .mcard:nth-child(9){ animation-delay:.28s }
.is-active .mcard:nth-child(10){ animation-delay:.32s }
.is-active .mcard:nth-child(11){ animation-delay:.36s }
.is-active .mcard:nth-child(12){ animation-delay:.40s }

/* Квиз: вопрос и варианты плавно въезжают при каждой смене вопроса. */
.is-active .quiz__q{ animation:optIn .45s var(--ease-out) both; }
.is-active .quiz__opt:not(.wrong):not(.correct){ animation:optIn .42s var(--ease-out) both; }
.is-active .quiz__opt:nth-child(1){ animation-delay:.08s }
.is-active .quiz__opt:nth-child(2){ animation-delay:.15s }
.is-active .quiz__opt:nth-child(3){ animation-delay:.22s }
.is-active .quiz__opt:nth-child(4){ animation-delay:.29s }
.qdot.current{ box-shadow:0 2px 8px -1px rgba(217,166,108,.85); }

/* Игра: карточка-оверлей приятно всплывает при показе. */
.game-overlay:not([hidden]) .game-overlay__box{ animation:cardIn .45s var(--ease-spring) both; }

/* Финал: код-размер как аккуратный «золотой» бейдж. */
.finale__code{
  display:inline-block; padding:8px 16px; border-radius:var(--pill);
  background:#FBF1E4; border:1px solid var(--gold-soft);
  box-shadow:0 6px 16px -10px rgba(217,166,108,.9);
}
.riddle{ text-wrap:balance; }

/* Низкие вьюпорты (десктоп-рамка ~686px, невысокие телефоны):
   ужимаем габаритные блоки, чтобы всё дышало и помещалось без обрезки. */
@media (max-height:780px){
  .screen{ padding:14px 22px 22px; }
  .card{ padding:22px 22px 24px; }
  .screen-title{ margin-bottom:10px; }
  .screen-title::after{ margin-top:9px; }
  .screen-sub{ margin-bottom:16px; }
  /* интро */
  .photo-frame{ width:min(56%,186px); }
  .intro{ gap:11px; }
  .cat-note{ padding:12px 14px; }
  .cat-note p{ font-size:13.5px; }
  /* мемори */
  .memory{ gap:8px; }
  /* миссия / кольцемер */
  .mission{ font-size:14px; margin-bottom:12px; }
  .mission p{ margin-bottom:8px; }
  .mission__steps{ gap:7px; margin:8px 0; }
  .mission__joke{ font-size:18px; }
  .ring-value b{ font-size:46px; }
  .stepper{ width:52px; height:52px; font-size:26px; }
  .ring-input{ margin:2px 0 12px; }
  .btn--ghost{ margin-bottom:11px; }
}