:root {
  --cream: #f5ecdd;
  --sand: #e3ceb6;
  --sand-deep: #d6bc9c;
  --ink: #3d2314;
  --muted: #8a7462;
  --line: #3d231466;
  --olive: #5a5d45;
  --script: "Great Vibes", "Segoe Script", cursive;
  --sans: "Montserrat", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .9, .25, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 300 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; height: 100svh; }
body { touch-action: manipulation; } /* iki dəfə toxunuşla böyütmə olmasın */

/* kağız dənəsi */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 41;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#scene.is-ready { opacity: 1; }

.script {
  font-family: var(--script);
  font-weight: 400;
  letter-spacing: .01em;
}

/* ---------- dil ---------- */
.lang {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  z-index: 50;
  display: flex;
  padding: 3px;
  border-radius: 99px;
  background: rgba(245, 236, 221, .8);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(61, 35, 20, .08);
}
.lang button {
  padding: .4rem .6rem;
  border: 0;
  border-radius: 99px;
  background: none;
  color: var(--muted);
  font: 500 .65rem var(--sans);
  letter-spacing: .12em;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

/* ---------- zərf ---------- */
.envelope {
  position: fixed;
  inset: 0;
  z-index: 40;
  perspective: 1400px;
  overflow: hidden;
}
.flap {
  position: absolute;
  inset: 0;
  background: var(--sand);
  transition: transform .7s var(--ease), opacity 1.2s ease;
}
.flap--left   { clip-path: polygon(0 0, 50% 50%, 0 100%); background: #e6d2bb; }
.flap--right  { clip-path: polygon(100% 0, 50% 50%, 100% 100%); background: #e6d2bb; }
.flap--bottom { clip-path: polygon(0 100%, 50% 50%, 100% 100%); background: #e0cab0; }
.flap--top {
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  background: linear-gradient(#e7d4bd, #e2ccb2);
  transform-origin: 50% 0;
  filter: drop-shadow(0 4px 6px rgba(61, 35, 20, .18));
  display: flex;
  justify-content: center;
}
/* qatlama xətləri */
.flap--left::after, .flap--right::after, .flap--bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .25) 50%, transparent);
  opacity: .6;
}
.flap--top { flex-direction: column; align-items: center; justify-content: flex-start; }
.envelope__to {
  margin: 0;
  padding-top: 9vh;
  font: 500 .72rem var(--sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  opacity: calc(1 - var(--p, 0) * .6);
}
.envelope__title {
  margin: 0;
  padding-top: 1.1rem;
  max-width: 12ch;
  text-align: center;
  font: 400 clamp(2.4rem, 9vw, 3.6rem)/1.1 var(--script);
  color: var(--ink);
  animation: float 6s ease-in-out infinite;
}

/* ---------- sürüşdürərək açma ---------- */
.unlock {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: min(320px, 84vw);
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  transition: opacity .6s ease, scale .6s var(--ease), filter .6s ease;
}

/* kağıza basılmış yiv */
.unlock__track {
  --x: 0;
  position: relative;
  width: 100%;
  height: 76px;
  border-radius: 99px;
  background: linear-gradient(#d9c1a3, #e5d1b9 70%);
  box-shadow:
    inset 0 3px 7px rgba(61, 35, 20, .24),
    inset 0 -1px 0 rgba(255, 255, 255, .55),
    0 1px 0 rgba(255, 255, 255, .7);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* tikiş — möhürün keçdiyi yerdə açılır */
.unlock__stitch {
  position: absolute;
  inset: 0 38px;
  width: calc(100% - 76px);
  height: 100%;
  overflow: visible;
  clip-path: inset(0 0 0 calc(var(--x) * 1px));
  /* yazının arxasında tikiş görünməsin */
  -webkit-mask-image: linear-gradient(90deg, #000 0 8%, transparent 16% 84%, #000 92%);
  mask-image: linear-gradient(90deg, #000 0 8%, transparent 16% 84%, #000 92%);
}
.unlock__stitch line {
  stroke: #a98559;
  stroke-width: 1.3;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  opacity: .75;
  animation: stitch 1.2s linear infinite;
}
@keyframes stitch { to { stroke-dashoffset: -10; } }

/* möhürün arxasında yivi dolduran işıq */
.unlock__track::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 6px;
  width: calc(var(--x) * 1px + 64px);
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(241, 217, 162, 0), rgba(241, 217, 162, .55));
  box-shadow: inset 0 0 12px rgba(255, 246, 228, .5);
  opacity: min(1, calc(var(--x) / 40));
}

/* arxasınca çəkilən qızılı sap */
.unlock__gold {
  position: absolute;
  left: 38px;
  top: 50%;
  width: calc(var(--x) * 1px);
  height: 2px;
  translate: 0 -50%;
  border-radius: 2px;
  background: linear-gradient(90deg, #b8914f, #f1d9a2 60%, #c9a46a);
  box-shadow: 0 0 8px rgba(233, 196, 120, .8), 0 0 18px rgba(233, 196, 120, .45);
}

.unlock__hint {
  position: absolute;
  inset: 0 58px 0 82px;
  display: grid;
  place-items: center;
  font: 500 .64rem var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(100deg, #8a7462 0 38%, #fff6e4 50%, #8a7462 62% 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  /* möhür üstündən keçdikcə hərflər silinir */
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--x) * 1px - 26px), #000 calc(var(--x) * 1px + 2px));
  mask-image: linear-gradient(90deg, transparent calc(var(--x) * 1px - 26px), #000 calc(var(--x) * 1px + 2px));
  animation: shimmer 3.2s cubic-bezier(.45, 0, .55, 1) infinite;
  pointer-events: none;
}
@keyframes shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }

/* qıfıl */
.unlock__lock {
  position: absolute;
  right: 22px;
  top: 50%;
  width: 20px;
  translate: 0 -55%;
  overflow: visible;
  transition: scale .4s var(--ease), filter .4s;
}
.unlock__lock .shackle {
  fill: none;
  stroke: #8a6a48;
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-box: fill-box;
  transform-origin: 100% 100%;
  transform: translateY(calc(var(--p, 0) * -2px));
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.unlock__lock rect { fill: #a98559; }
.unlock__lock circle { fill: #f1e4d0; }
.unlock.is-done .unlock__lock { scale: 1.2; filter: drop-shadow(0 0 6px rgba(233, 196, 120, .9)); }
.unlock.is-done .unlock__lock .shackle { transform: translate(5px, -5px) rotate(28deg); }

/* mum möhür — yivdə yuvarlanır */
.seal {
  position: absolute;
  left: 6px;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: 0;
  padding: 0;
  border: 0;
  translate: calc(var(--x) * 1px) -50%;
  rotate: calc(var(--x) * 1.8deg); /* məsafə / radius */
  border-radius: 48% 52% 50% 50% / 51% 49% 53% 47%;
  background:
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(255, 255, 255, .28) 57%, transparent 61%),
    radial-gradient(circle at 34% 28%, #ecd8b8, #c9a77d 55%, #a07c50);
  box-shadow:
    inset 0 0 0 4px rgba(120, 85, 50, .2),
    inset 2px 3px 7px rgba(255, 255, 255, .4),
    0 6px 14px rgba(61, 35, 20, .3);
  color: #6b4b2c;
  cursor: grab;
  touch-action: none;
  animation: breathe 2.8s ease-in-out infinite;
  transition: translate .8s cubic-bezier(.34, 1.56, .64, 1), rotate .8s cubic-bezier(.34, 1.56, .64, 1), scale .3s var(--ease);
}
.seal::before,
.seal::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(201, 164, 106, .75);
  animation: ripple 2.6s cubic-bezier(.2, .6, .35, 1) infinite;
  pointer-events: none;
}
.seal::after { animation-delay: 1.3s; }
@keyframes ripple {
  0% { scale: 1; opacity: .9; }
  100% { scale: 1.75; opacity: 0; }
}
.unlock.is-dragging .seal::before,
.unlock.is-dragging .seal::after,
.unlock.is-done .seal::before,
.unlock.is-done .seal::after { animation: none; opacity: 0; }
.unlock.is-done .seal { box-shadow: inset 0 0 0 4px rgba(120,85,50,.2), inset 2px 3px 7px rgba(255,255,255,.4), 0 0 26px rgba(241, 210, 140, .95); }

.seal__mono {
  display: block;
  font: 400 1.35rem/1 var(--script);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 -1px 0 rgba(90, 60, 30, .4);
  pointer-events: none;
}
.seal:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.unlock.is-idle .seal { animation: breathe 2.8s ease-in-out infinite, nudge 3.4s var(--ease) 1.5s infinite; }
.unlock.is-dragging .seal {
  cursor: grabbing;
  scale: 1.08;
  transition: scale .3s var(--ease);
  box-shadow:
    inset 0 0 0 4px rgba(120, 85, 50, .2),
    inset 2px 3px 7px rgba(255, 255, 255, .4),
    0 12px 22px rgba(61, 35, 20, .32);
}
@keyframes nudge { 0%, 70%, 100% { left: 6px; } 80% { left: 26px; } 88% { left: 4px; } 94% { left: 12px; } }

.unlock__date {
  margin: 0;
  font: 500 .7rem var(--sans);
  letter-spacing: .42em;
  color: var(--muted);
  opacity: calc(1 - var(--p, 0));
}

/* sürüşdürdükcə zərf azca açılır */
.flap--top { transform: rotateX(calc(var(--p, 0) * -24deg)); }
.flap--left { transform: translateX(calc(var(--p, 0) * -12px)); }
.flap--right { transform: translateX(calc(var(--p, 0) * 12px)); }
.envelope__title { opacity: calc(1 - var(--p, 0) * .5); }
.envelope.is-dragging .flap { transition: none; }

/* qıfıl açıldı → zolaq çəkilir, yerində qızılı adlar yaranır */
.unlock.is-done { opacity: 0; scale: .94; filter: blur(4px); transition: opacity .7s ease .45s, scale .7s var(--ease) .45s, filter .7s ease .45s; }

/* açılış */
.envelope.is-opening .unlock { opacity: 0; scale: 1.08; filter: blur(6px); }
.envelope.is-opening .flap--top    { transform: rotateX(-175deg); opacity: 0; transition: transform 1.5s var(--ease) .2s, opacity 1.2s ease .2s; }
.envelope.is-opening .flap--left   { transform: translateX(-60%) rotate(-6deg); transition: transform 1.5s var(--ease) .55s; }
.envelope.is-opening .flap--right  { transform: translateX(60%) rotate(6deg); transition: transform 1.5s var(--ease) .55s; }
.envelope.is-opening .flap--bottom { transform: translateY(65%); transition: transform 1.5s var(--ease) .65s; }
.envelope.is-open { visibility: hidden; }

@keyframes breathe { 50% { box-shadow: inset 0 0 0 4px rgba(120,85,50,.2), inset 2px 3px 7px rgba(255,255,255,.4), 0 6px 24px rgba(201,164,106,.7); } }
@keyframes float { 50% { translate: 0 -6px; } }
/* ---------- səhifə ---------- */
.page {
  position: relative;
  max-width: 530px;
  margin: 0 auto;
  padding: 0 0 env(safe-area-inset-bottom);
  text-align: center;
}

/* başlıq */
.story__media {
  position: relative;
  aspect-ratio: 3 / 4;
  max-height: 78svh;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(160deg, #cdb79d, #8c7460);
  clip-path: inset(18% 22% 30% 22% round 200px);
  transition: clip-path 1.8s var(--ease) .5s;
}
body.is-open .story__media { clip-path: inset(0 0 0 0 round 0); }

.story__media video,
.story__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 112%;
  object-fit: cover;
  scale: 1.25;
  transition: scale 3.2s var(--ease) .4s;
  will-change: transform;
}
body.is-open .story__media video,
body.is-open .story__media img { scale: 1; }
.story__media video:not(.is-ready) { opacity: 0; }
.story__media img.is-hidden { display: none; }

.story__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(30, 18, 10, .15), transparent 35%, rgba(30, 18, 10, .45) 85%);
}
.story__text {
  position: absolute;
  inset: auto 0 9%;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.story__names {
  margin: 0;
  font: 400 clamp(2.9rem, 13vw, 3.8rem)/1 var(--script);
}
.story__names .w { display: inline-block; }
.story__names .amp { margin: 0 .12em; }
.story__date {
  margin: .2rem 0 0;
  font: 400 clamp(2.4rem, 11vw, 3.2rem)/1 var(--script);
}
/* hərf-hərf görünmə */
.story__names .ch, .story__date .ch {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  translate: 0 .35em;
  transition: opacity .9s ease, filter .9s ease, translate .9s var(--ease);
  transition-delay: calc(1.4s + var(--i) * 55ms);
}
body.is-open .story__names .ch,
body.is-open .story__date .ch { opacity: 1; filter: blur(0); translate: 0 0; }

.torn {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 26px;
  fill: var(--cream);
}

/* musiqi */
.music {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 1.5rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.music__ring {
  position: absolute;
  inset: 0;
  animation: spin 14s linear infinite;
  animation-play-state: paused;
}
.music.is-playing .music__ring { animation-play-state: running; }
.music__ring text {
  font: 500 7.6px var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  fill: var(--ink);
}
.music__icon {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
}
/* ▶ / ❚❚ */
.music__icon i { width: 3px; height: 11px; background: var(--ink); transition: .3s; }
.music:not(.is-playing) .music__icon i:first-child {
  width: 0; height: 0; background: none;
  border-left: 10px solid var(--ink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 3px;
}
.music:not(.is-playing) .music__icon i:last-child { display: none; }
@keyframes spin { to { rotate: 360deg; } }

/* bölmələr */
.sec { padding: 4.5rem 26px 0; }
.sec--tight { padding-top: 2.5rem; }
.sec p { margin: 0 auto .8rem; max-width: 32ch; font-size: 1.02rem; }
.sec h2, .footer h2 {
  margin: 0 0 1rem;
  font-size: clamp(2.5rem, 11vw, 3rem);
  line-height: 1.15;
  color: var(--ink);
}
.muted { color: var(--muted); font-size: .9rem !important; }
.venue { font-weight: 500; letter-spacing: .04em; }

/* əl yazısı effekti: soldan sağa açılır */
.write {
  -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 60%);
  mask-image: linear-gradient(to right, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 2s cubic-bezier(.6, .1, .3, 1), mask-position 2s cubic-bezier(.6, .1, .3, 1);
}
.write.is-visible { -webkit-mask-position: 0 0; mask-position: 0 0; }

.rise {
  opacity: 0;
  translate: 0 22px;
  filter: blur(6px);
  transition: opacity 1s ease .25s, translate 1s var(--ease) .25s, filter 1s ease .25s;
}
.rise.is-visible { opacity: 1; translate: 0 0; filter: blur(0); }

/* üç gün */
.days {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 340px;
  margin: 0 auto;
  border: 1px solid var(--ink);
}
.days > div {
  padding: .5rem .25rem .6rem;
  min-width: 0;
}
.days > div + div { border-left: 1px solid var(--ink); }
.days small {
  display: block;
  min-height: 2.4em;
  padding-bottom: .3rem;
  margin: 0 .4rem .5rem;
  border-bottom: 1px solid var(--ink);
  font-size: .66rem;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: flex;
  align-items: end;
  justify-content: center;
}
.days em { display: block; font-style: normal; font-size: .8rem; color: var(--muted); }
.days strong { display: block; font-weight: 400; font-size: 3.4rem; line-height: 1.05; }
.days .ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 128%;
  translate: -50% -50%;
  overflow: visible;
  pointer-events: none;
}
.days .ring path {
  fill: none;
  stroke: var(--sand-deep);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s cubic-bezier(.6, .1, .3, 1) .6s;
}
.days.is-visible .ring path { stroke-dashoffset: 0; }

/* proqram: ürək + sap */
.thread { position: relative; margin-top: 1.5rem; }
.thread__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.thread__line {
  fill: none;
  stroke: var(--sand-deep);
  stroke-width: 1.6;
}
.heart {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 40px;
  overflow: visible;
  fill: var(--sand);
  stroke: var(--sand-deep);
  stroke-width: .8;
  filter: drop-shadow(0 4px 6px rgba(61, 35, 20, .15));
  animation: beat 1.6s ease-in-out infinite;
  transform-origin: 50% 60%;
  will-change: transform;
}
@keyframes beat { 0%, 60%, 100% { scale: 1; } 15% { scale: 1.12; } 30% { scale: .98; } 45% { scale: 1.06; } }

.steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 5.5rem 0 3rem;
  display: grid;
  gap: 5rem;
}
.step {
  width: 52%;
  display: grid;
  justify-items: center;
  opacity: .12;
  filter: blur(3px);
  transition: opacity .9s ease, translate 1.1s var(--ease), filter .9s ease;
}
.step--l { justify-self: start; translate: -24px 0; }
.step--r { justify-self: end; translate: 24px 0; }
.step.is-active { opacity: 1; translate: 0 0; filter: blur(0); }
.step time { transition: color .6s; }
.step.is-active time { animation: glow 1.4s ease; }
@keyframes glow { 30% { color: #a98559; } }
.step b { font-size: 2.3rem; line-height: 1.1; }
.step time { font-size: 1.9rem; font-weight: 300; line-height: 1.2; }
.step span { font-size: .82rem; color: var(--muted); margin-top: .2rem; }

/* düymə */
.pill {
  display: inline-block;
  margin-top: .8rem;
  padding: .85rem 1.8rem;
  border: 1px solid var(--ink);
  border-radius: 99px;
  background: none;
  color: var(--ink);
  font: 500 .72rem var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s;
}
.pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
  transition: clip-path .6s var(--ease);
}
.pill:hover { color: var(--cream); }
.pill:hover::before { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }

/* ---------- oyun: Buketi tut ---------- */
.game {
  position: relative;
  z-index: 42; /* Three.js ləçəklərinin üstündə */
  margin: 1.6rem auto 0;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, #fffaf1 0%, transparent 70%),
    linear-gradient(#f9f2e7, #efe1cc);
  border: 1px solid rgba(61, 35, 20, .1);
  box-shadow: 0 18px 40px rgba(61, 35, 20, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.game__hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .8rem 1rem .4rem;
  font: 500 .8rem var(--sans);
}
.game__points small { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.game__points b { font-size: 1.15rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.game__timer {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: rgba(61, 35, 20, .1);
  overflow: hidden;
}
.game__timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b8914f, #f1d9a2); transition: width .2s linear; }
#gameLives { font-size: .85rem; letter-spacing: .1em; }
#gameCanvas {
  display: block;
  width: 100%;
  height: clamp(380px, 62svh, 520px);
  touch-action: none;
  cursor: grab;
}
.game.is-playing #gameCanvas { cursor: none; }

.game__overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background: rgba(249, 242, 231, .82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: overlayIn .5s var(--ease);
}
@keyframes overlayIn { from { opacity: 0; scale: .97; } }
.game__overlay p { margin: 0; max-width: none; }
.game__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  max-width: 300px;
}
.game__legend span {
  padding: .35rem .75rem;
  border-radius: 99px;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 2px 6px rgba(61, 35, 20, .06);
  font: 500 .82rem var(--sans);
}
.game__label { font: 500 .7rem var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.game__final b { font-size: 3.6rem; font-weight: 300; line-height: 1; }
.game__final small { font-size: .8rem; color: var(--muted); }
.game__best { font-size: .82rem; color: var(--muted); }
.game__prophecy { font-size: 1.9rem; line-height: 1.2; max-width: 16ch !important; color: var(--ink); }
.game__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.game__actions .pill, .game__overlay > .pill { margin-top: .2rem; }

.pill--gold {
  border-color: transparent;
  background: linear-gradient(135deg, #dcbb7f, #b48a4f);
  color: #fff;
  box-shadow: 0 8px 18px rgba(180, 138, 79, .35);
}
.pill--gold:hover { color: #fff; }

.game__desc { font-size: .95rem !important; max-width: 30ch !important; line-height: 1.5; }

/* ---------- Üzüyü tap ---------- */
.ring-stage {
  position: relative;
  height: clamp(320px, 50svh, 400px);
  perspective: 900px;
  overflow: hidden;
}
.ring-msg { flex: 1; text-align: center; font-size: .78rem; color: var(--muted); }
.rbox {
  --bw: min(100px, 25vw);
  position: absolute;
  top: 34%;
  left: 50%;
  width: var(--bw);
  height: calc(var(--bw) * .95);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, 0);
  transform-style: preserve-3d;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.is-picking .rbox { cursor: pointer; animation: hop 1.6s ease-in-out infinite; }
.is-picking .rbox:nth-child(2) { animation-delay: .2s; }
.is-picking .rbox:nth-child(3) { animation-delay: .4s; }
@keyframes hop { 0%, 80%, 100% { translate: 0 0; } 88% { translate: 0 -6px; } }
.is-picking .rbox:hover .rbox__lid { transform: rotateX(28deg); }

/* qutunun gövdəsi — məxmər + qızılı zolaq */
.rbox__base {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(180deg, #7d4c43 0%, #5b3a35 45%, #3a221f 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .12),
    inset 0 -10px 18px rgba(0, 0, 0, .28),
    0 14px 20px rgba(61, 35, 20, .28);
}
.rbox__base::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b8914f, #f4dfae, #b8914f);
}
.rbox__base::after {
  content: "";
  position: absolute;
  left: 30%;
  right: 30%;
  top: 16%;
  height: 20%;
  border-radius: 99px;
  background: radial-gradient(#24130f, #3f2522);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .55);
}
/* qapaq — arxa tərəfə açılır */
.rbox__lid {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 58%;
  height: 42%;
  border-radius: 18px 18px 6px 6px;
  background: linear-gradient(180deg, #8f5d52, #5b3a35 85%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 -2px 10px rgba(0, 0, 0, .12);
  transform-origin: 50% 100%;
  transition: transform .6s cubic-bezier(.34, 1.45, .64, 1);
}
.rbox__lid::before {
  content: "♥";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--bw) * .16);
  color: #e3c58e;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.rbox__lid::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, #b8914f, #f4dfae, #b8914f);
}
.rbox.is-open .rbox__lid { transform: rotateX(112deg); }

.rbox__item {
  position: absolute;
  left: 50%;
  bottom: 42%;
  font: calc(var(--bw) * .42) / 1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  opacity: 0;
  transform: translate(-50%, 40%) scale(.3);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
}
.rbox.is-open .rbox__item { opacity: 1; transform: translate(-50%, -18%) scale(1); transition-delay: .12s; }

.rbox__glow {
  position: absolute;
  inset: -45% -35% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, .95), rgba(241, 217, 162, .4) 40%, transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.rbox.is-ring.is-open .rbox__glow { opacity: 1; animation: glowPulse 1.4s ease-in-out infinite; }
@keyframes glowPulse { 50% { scale: 1.12; } }
.rbox.is-wrong .rbox__base { animation: wrong .5s; }
@keyframes wrong { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

.ring-quip {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: 92%;
  margin: 0 !important;
  max-width: none !important;
  translate: -50% 0;
  text-align: center;
  font: 400 1.55rem/1.2 var(--script);
  color: var(--ink);
}
.ring-quip:not(:empty) { animation: quipIn .5s var(--ease); }
@keyframes quipIn { from { opacity: 0; translate: -50% 10px; } }
.ring-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(#fff, #f1d9a2 60%, transparent 70%);
  pointer-events: none;
}

/* ---------- Gizli qapı və "Toy Kainatı" ---------- */
.secret-hint {
  margin-top: 2.4rem !important;
  font-size: .72rem !important;
  letter-spacing: .08em;
  color: var(--muted);
  animation: hintPulse 3.2s ease-in-out infinite;
}
@keyframes hintPulse { 50% { opacity: .45; } }

/* toxunuş halqası və partlayış dalğası */
.tap-spark, .shock {
  position: fixed;
  z-index: 60;
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
}
.tap-spark {
  width: 16px;
  height: 16px;
  border: 1.5px solid #d9b779;
  box-shadow: 0 0 10px rgba(241, 210, 140, .8);
  animation: tapRing .55s ease-out forwards;
}
@keyframes tapRing { from { scale: .2; opacity: 1; } to { scale: 3.2; opacity: 0; } }
.shock {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(241, 217, 162, .95);
  box-shadow: 0 0 40px rgba(241, 217, 162, .9), inset 0 0 30px rgba(255, 255, 255, .8);
  animation: shock 1s cubic-bezier(.1, .7, .3, 1) forwards;
}
@keyframes shock { from { scale: .1; opacity: 1; } to { scale: 45; opacity: 0; } }

.page { transition: transform 1.1s var(--ease), filter 1.1s ease, opacity 1.1s ease; }
body.is-shaking .page { animation: shake .26s linear; }
@keyframes shake {
  20% { translate: -7px 3px; } 40% { translate: 6px -4px; } 60% { translate: -4px -2px; } 80% { translate: 3px 3px; }
}
body.is-warping .page { transform: scale(.84); filter: blur(10px); opacity: .2; }
body.is-returning .page { animation: returnIn .9s var(--ease); }
@keyframes returnIn { from { transform: scale(1.12); filter: blur(12px); opacity: 0; } }
body.in-universe { overflow: hidden; }

/* keçid zamanı qaranlıq kosmos (Three.js ulduzları bunun üstündə uçur) */
.warp-veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #2c2050 0%, #130d26 55%, #06040d 100%);
  transition: opacity .8s ease;
}
body.is-warping .warp-veil { opacity: 1; }
.warp-veil.is-flash { z-index: 49; opacity: 1; }
.warp-veil.is-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, #fffaf0, #ffe9bf 60%, #f1d29a);
  animation: flash .75s ease-out forwards;
}
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

.universe {
  position: fixed;
  inset: 0;
  z-index: 48;
  overflow: hidden;
  color: #f6ecdc;
  background: radial-gradient(120% 80% at 50% 0%, #3b2b60 0%, #1a1233 45%, #0b0818 100%);
}
.universe.is-out { animation: uniOut .65s cubic-bezier(.6, 0, .8, .4) forwards; }
@keyframes uniOut { to { scale: .04; opacity: 0; filter: blur(6px); border-radius: 50%; } }

/* ulduzlu səma — iki qat, biri sürüşür, digəri yanıb-sönür */
.universe__stars, .universe__stars::after {
  position: absolute;
  inset: -50%;
  background-image:
    radial-gradient(1.6px 1.6px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 120px 80px, #ffe9c2, transparent),
    radial-gradient(1.3px 1.3px at 200px 150px, #fff, transparent),
    radial-gradient(1px 1px at 60px 200px, #cfd8ff, transparent),
    radial-gradient(2px 2px at 260px 60px, #ffe9c2, transparent),
    radial-gradient(1px 1px at 170px 230px, #fff, transparent);
  background-size: 300px 260px;
  animation: drift 90s linear infinite;
}
.universe__stars::after {
  content: "";
  inset: 0;
  background-size: 430px 390px;
  background-position: 70px 40px;
  animation: twinkle 3.5s ease-in-out infinite;
}
@keyframes drift { to { transform: translate(300px, 260px); } }
@keyframes twinkle { 50% { opacity: .25; } }

.universe__floaters span {
  position: absolute;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  opacity: .85;
  filter: drop-shadow(0 0 12px rgba(241, 210, 140, .35));
  animation: space 16s ease-in-out infinite alternate;
}
.universe__floaters span:nth-child(1) { left: 6%; top: 14%; font-size: 3.2rem; animation-duration: 22s; }
.universe__floaters span:nth-child(2) { right: 8%; top: 22%; animation-duration: 14s; }
.universe__floaters span:nth-child(3) { left: 10%; bottom: 18%; animation-duration: 19s; }
.universe__floaters span:nth-child(4) { right: 12%; bottom: 12%; animation-duration: 17s; }
.universe__floaters span:nth-child(5) { left: 44%; top: 6%; font-size: 1.4rem; animation-duration: 12s; }
.universe__floaters span:nth-child(6) { right: 30%; bottom: 4%; font-size: 1.5rem; animation-duration: 15s; }
.universe__floaters span:nth-child(7) { right: 4%; top: 4%; animation-duration: 25s; }
.universe__floaters span:nth-child(8) { left: 26%; bottom: 40%; font-size: 1.2rem; animation-duration: 10s; }
@keyframes space {
  0% { transform: translate(0, 0) rotate(-12deg); }
  50% { transform: translate(18px, -26px) rotate(10deg); }
  100% { transform: translate(-14px, 20px) rotate(-4deg); }
}

.universe__back, .uni-hubBtn {
  padding: .55rem 1rem;
  border: 1px solid rgba(246, 236, 220, .35);
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f6ecdc;
  font: 500 .72rem var(--sans);
  letter-spacing: .08em;
  cursor: pointer;
  transition: background .3s;
}
.universe__back:hover, .uni-hubBtn:hover { background: rgba(255, 255, 255, .18); }
.universe__back {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 14px;
}

.universe__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px) + 5rem) 18px calc(env(safe-area-inset-bottom, 0px) + 3rem);
  text-align: center;
}
.uni-hub, .uni-play { max-width: 530px; margin: 0 auto; }
.universe.is-in .uni-hub { animation: uniIn 1s var(--ease); }
@keyframes uniIn { from { opacity: 0; scale: 1.15; filter: blur(8px); } }

.uni-kicker {
  margin: 0;
  font: 500 .72rem var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #e3c58e;
}
.uni-title {
  margin: .5rem 0 1rem;
  font-size: clamp(2.5rem, 10vw, 3.5rem);
  line-height: 1.12;
  color: #fff4dc;
  text-shadow: 0 0 18px rgba(241, 210, 140, .6), 0 0 44px rgba(241, 210, 140, .25);
}
.uni-title .ch {
  display: inline-block;
  opacity: 0;
  translate: 0 -.6em;
  filter: blur(6px);
  animation: chIn .8s var(--ease) forwards;
  animation-delay: calc(.35s + var(--i) * 32ms);
}
@keyframes chIn { to { opacity: 1; translate: 0 0; filter: blur(0); } }
.uni-sub { max-width: 34ch; margin: 0 auto 2rem; font-size: .95rem; color: rgba(246, 236, 220, .75); }

.uni-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; perspective: 900px; }
@media (max-width: 360px) { .uni-cards { grid-template-columns: 1fr; } }
.uni-card {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 1.5rem .9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 22px;
  background: linear-gradient(160deg, #fbf4e8, #ead9bf);
  color: var(--ink);
  font-family: var(--sans);
  cursor: pointer;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease, box-shadow .3s;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .5), 0 0 34px rgba(241, 210, 140, .16);
  animation: cardIn .9s var(--ease) .9s backwards;
}
.uni-card:nth-child(2) { animation-delay: 1.05s; }
.uni-card:hover { box-shadow: 0 26px 50px rgba(0, 0, 0, .55), 0 0 46px rgba(241, 210, 140, .4); }
.uni-card:active { scale: .97; }
.uni-card:focus-visible { outline: 2px solid #e3c58e; outline-offset: 4px; }
@keyframes cardIn { from { opacity: 0; translate: 0 40px; rotate: -4deg; } }
.uni-card__emoji { font-size: 3rem; line-height: 1.1; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 8px 10px rgba(61, 35, 20, .25)); }
.uni-card:nth-child(2) .uni-card__emoji { animation-delay: -1.5s; }
@keyframes bob { 50% { translate: 0 -6px; rotate: 6deg; } }
.uni-card b { font-size: 1.9rem; font-weight: 400; line-height: 1.1; }
.uni-card small { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.uni-card em { margin-top: .3rem; font: 500 .66rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #a07c50; }
.uni-card em i { font-style: normal; font-weight: 600; }

.uni-play { text-align: center; }
.uni-play .game { margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .universe__stars, .universe__floaters span, .uni-card__emoji { animation: none !important; }
  .uni-title .ch { opacity: 1; translate: none; filter: none; }
}

/* geri sayım */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 360px;
  margin: 1.5rem auto 0;
  border: 1px solid var(--ink);
}
.countdown div { padding: .9rem 0 .7rem; }
.countdown div + div { border-left: 1px solid var(--ink); }
.countdown b {
  display: block;
  height: 1.15em;
  overflow: hidden;
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.countdown b.tick { animation: roll .45s var(--ease); }
.countdown span { font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@keyframes roll { from { translate: 0 -60%; opacity: 0; } }

/* son */
.footer { padding: 5rem 26px 5rem; }
.footer__heart { height: 230px; }
.rings-anchor { height: 260px; margin-top: -1.5rem; }
.footer p { margin: 0 0 .5rem; font-size: .9rem; }
.footer a { color: var(--ink); }
.footer__sign { margin-top: 1.4rem !important; font-size: 2.4rem !important; }

@media (min-width: 700px) {
  .page { box-shadow: 0 0 80px rgba(61, 35, 20, .06); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .write { -webkit-mask: none; mask: none; }
  .rise, .step { opacity: 1; translate: none; filter: none; }
  .heart { display: none; }
  .story__media { clip-path: none; }
  .story__names .ch, .story__date .ch { opacity: 1; filter: none; translate: none; }
  .days .ring path { stroke-dashoffset: 0; }
  .thread__line { stroke-dashoffset: 0 !important; }
}