:root {
  color-scheme: dark;
  --bg1: #07060d;
  --bg2: #2a1226;
  --text: #e3c3cf;
  --hand: "Caveat", "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html { height: 100%; }
* { box-sizing: border-box; }
body {
  margin: 0; height: 100%; overflow: hidden;
  background: radial-gradient(ellipse at 50% 65%, var(--bg2), var(--bg1) 72%);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
.scene { position: relative; width: 100%; height: 100%; overflow: hidden; }
.scene::after {
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  opacity: .14; mix-blend-mode: overlay;
  background-image: radial-gradient(#fff .6px, transparent .7px);
  background-size: 3px 3px;
}
.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 42%, #07060dcc 100%),
    radial-gradient(ellipse at 50% 18%, #3a1840, transparent 42%),
    radial-gradient(ellipse at 18% 88%, #14243f, transparent 36%),
    radial-gradient(ellipse at 82% 70%, #2a1230, transparent 34%),
    #07060d;
}
.sky i {
  position: absolute; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px #fff;
  animation: twinkle ease-in-out infinite;
}
.sky .petal, .drift {
  position: absolute; width: 13px; height: 18px; pointer-events: none;
  background: linear-gradient(165deg, #fff 0%, #ffd0dc 34%, #e23a62 100%);
  clip-path: polygon(50% 0, 82% 22%, 100% 52%, 72% 100%, 50% 78%, 28% 100%, 0 52%, 18% 22%);
  opacity: .72;
}
.sky .petal { top: -10%; animation: drift linear infinite; }
.drift { top: 16%; z-index: 2; opacity: 0; animation: float-petal 7.5s ease-in infinite; }
@keyframes twinkle { 50% { opacity: .12; transform: scale(.55); } }
@keyframes drift {
  0% { transform: translateY(-8vh) rotate(0deg); }
  100% { transform: translateY(112vh) rotate(340deg); }
}
@keyframes float-petal {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  18% { opacity: .8; }
  100% { opacity: 0; transform: translateY(42vmin) rotate(200deg); }
}

/* ---------- Parola sayfası ---------- */
.gate {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(ellipse at 50% 42%, #5a204466, transparent 48%),
    linear-gradient(#07060d66, #07060d99);
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.gate::before {
  content: ""; position: absolute; width: min(82vmin, 540px); height: min(82vmin, 540px);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ff3d6e33, #64c8ff18 40%, transparent 68%);
}
.gate.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.gate-clock {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 50%; right: auto; z-index: 2; width: max-content; max-width: calc(100% - 32px);
  transform: translateX(-50%); text-align: center; pointer-events: none;
  padding: 8px 20px 10px; border-radius: 18px;
  background: linear-gradient(180deg, #ffd6e214, #140910b0);
  border: 1px solid #ff8fab66;
  box-shadow: 0 10px 24px #0006, inset 0 1px 0 #fff4, 0 0 0 1px #e0b05644;
}
.gate .gate-date {
  margin: 0; font-family: "Segoe UI", system-ui, sans-serif;
  font-size: clamp(18px, 4.6vw, 22px); font-weight: 700; letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.95); opacity: 1;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.75), 0 0 22px rgba(255, 112, 196, 0.65);
}
.gate .gate-when {
  margin: 2px 0 0; font-family: var(--hand); font-weight: 700;
  font-size: clamp(22px, 5vw, 28px); color: #ffc2d1; opacity: 1;
  text-shadow: 0 0 12px #ff4d7a66;
}
.gate-form {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(380px, 100%); padding: 28px 22px 22px; text-align: center;
  border-radius: 28px;
  background:
    linear-gradient(180deg, #ffd6e21a, transparent 26%),
    linear-gradient(165deg, #321628e6, #120910e8);
  border: 1px solid #ff8fab77;
  box-shadow:
    0 24px 48px #0008,
    inset 0 1px 0 #fff5,
    inset 0 0 28px #ff4d7a16,
    0 0 0 1px #e0b05655;
}
.gate-form::before, .gate-form::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 1.5px solid #e0b056bb; pointer-events: none;
}
.gate-form::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.gate-form::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.gate .gate-whisper {
  margin: -4px 0 0; font-family: var(--hand); font-weight: 700;
  font-size: clamp(22px, 5vw, 30px); line-height: 1; color: #ffc2d1;
  text-shadow: 0 0 14px #ff4d7a66;
}
.gate-heart { width: 54px; filter: drop-shadow(0 0 14px #ff2d6a99); animation: beat 1.8s ease-in-out infinite; }
.gate .love-text {
  margin: 0;
  max-width: 100%;
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: clamp(1.7rem, 7.4vw, 3.15rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.9),
    0 0 30px rgba(255, 112, 196, 0.8),
    0 0 40px rgba(100, 200, 255, 0.7);
  pointer-events: none;
}
.gate p { margin: 0 0 6px; font-size: 15px; color: var(--text); opacity: .85; }
.gate .gate-msg { min-height: 20px; margin: 0; font-size: 14px; color: #ff9db4; opacity: 1; }
.gate input {
  width: 100%; padding: 14px 18px; font: inherit; font-size: 18px; text-align: center; letter-spacing: .12em;
  color: #fff; border-radius: 999px; outline: none;
  background:
    linear-gradient(180deg, #ffffff14, transparent 42%),
    #140910e6;
  border: 1px solid #e0b05688;
  box-shadow: inset 0 1px 0 #fff3, 0 8px 16px #0005;
}
.gate input::placeholder { color: #e3c3cf99; }
.gate input:focus { border-color: #ff8fab; box-shadow: 0 0 0 3px #ff6b9044, 0 0 22px #ff6b9033; }
.gate button {
  width: 100%; padding: 13px 18px; font: inherit; font-size: 16px; font-weight: 600; color: #fff;
  background: linear-gradient(#e8184f, #b3153a); border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 22px #e8184f44;
}
.gate button:hover { filter: brightness(1.12); }
.gate button:focus-visible { outline: 2px solid #ff8fab; outline-offset: 3px; }
.gate-form.shake { animation: shake .45s; }
@keyframes shake { 20% { translate: -10px 0; } 40% { translate: 9px 0; } 60% { translate: -6px 0; } 80% { translate: 4px 0; } }

/* ---------- Giriş: kalp ---------- */
.intro {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2vmin; padding: 20px;
  background:
    radial-gradient(ellipse at 50% 48%, #5a204655, transparent 46%),
    linear-gradient(#07060d44, #07060dbb);
  border: 0; cursor: pointer; font: inherit; color: inherit;
  transition: opacity .6s ease .35s, visibility 0s linear .95s;
}
.intro:focus-visible { outline: 2px solid #ff8fab; outline-offset: -8px; }
.intro.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.intro { visibility: hidden; }
.gate.gone ~ .intro:not(.gone) { visibility: visible; }
.intro-card {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  max-width: min(92vw, 540px); margin: 0 16px; padding: 14px 26px 16px;
  border-radius: 26px;
  background: linear-gradient(180deg, #2a1426ee, #120910ea);
  border: 1px solid #ff8fab88;
  box-shadow: 0 0 0 1px #e0b05644, 0 16px 32px #0007, inset 0 0 18px #ff4d7a22;
}
.hint {
  font-family: var(--hand); font-weight: 700;
  font-size: clamp(28px, 7vmin, 52px); color: #ffc2d1;
  text-shadow: 0 0 18px #ff4d7a88;
  animation: hint 2.4s ease-in-out infinite;
}
@keyframes hint { 50% { opacity: .55; transform: translateY(-1.2vmin); } }
.hint-sub {
  font-family: var(--hand); font-weight: 700;
  font-size: clamp(20px, 4.4vmin, 32px); color: #f3d5df;
  text-shadow: 0 0 12px #ff4d7a55;
}
.heart-wrap {
  position: relative; width: min(62vmin, 440px); margin-top: 1.6vmin;
  filter: drop-shadow(0 0 5vmin #ff2d6a99);
}
.heart-wrap::before {
  content: ""; position: absolute; left: 50%; top: 58%; z-index: -1;
  width: 100%; height: 78%; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ff4d7a33, transparent 64%);
}
.spark {
  position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 16px #ff8fab;
  animation: twinkle 2.4s ease-in-out infinite;
}
.spark.s1 { top: 10%; left: 4%; }
.spark.s2 { top: 16%; right: 2%; animation-delay: .7s; }
.spark.s3 { bottom: 24%; left: 8%; width: 4px; height: 4px; animation-delay: 1.2s; }
.spark.s4 { bottom: 18%; right: 10%; animation-delay: 1.7s; }
.heart { display: block; width: 100%; animation: beat 1.8s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes beat {
  0%, 70%, 100% { transform: scale(1); }
  14%, 42% { transform: scale(1.07); }
  28% { transform: scale(1); }
}
.intro.burst .intro-card, .intro.burst .hint, .intro.burst .hint-sub, .intro.burst .spark { animation: none; opacity: 0; transition: opacity .25s; }
.intro.burst .heart-wrap { animation: burst .9s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes burst {
  25% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(7); opacity: 0; }
}

/* ---------- Buket ---------- */
.bouquet {
  position: absolute; left: 50%; bottom: 0;
  width: 100vmin; height: 100vmin;
  transform: translateX(-50%);
}
.bouquet::before {
  content: ""; position: absolute; inset: 10% 5% 20% 5%;
  background: radial-gradient(circle at 50% 45%, #ff3d6e30, transparent 65%);
  opacity: 0; animation: fade 3s ease-out 2s forwards;
}
.layer, .roses { position: absolute; inset: 0; width: 100%; height: 100%; }

.stem, .stem-shadow {
  fill: none; stroke-linecap: round;
  stroke-dasharray: 1; animation: grow 1.3s ease-out backwards;
}
.stem { stroke: #2f7a45; stroke-width: .85; }
.stem-shadow { stroke: #123c24; stroke-width: 1.5; opacity: .55; }
@keyframes grow { from { stroke-dashoffset: 1; } }
.leaf { transform-box: fill-box; transform-origin: 50% 100%; animation: pop .9s ease-out 1.4s backwards; }
.leaf.vein { fill: #145c38; opacity: .45; }
.dedication {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 12vh); left: 0; right: 0; z-index: 2;
  width: max-content; margin: 0 auto; padding: 4px 26px 10px;
  border-radius: 22px; text-align: center; pointer-events: none; opacity: 0;
  background: #1b0d1c99; border: 1px solid #ff6b9088;
  box-shadow: 0 12px 28px #0005, inset 0 0 18px #ff4d7a22;
  backdrop-filter: blur(3px);
  font-family: var(--hand); font-weight: 700;
  font-size: clamp(40px, 9vmin, 72px); color: #ffd6e2;
  text-shadow: 0 0 18px #ff4d7a77, 0 0 36px #64c8ff33;
}
.dedication.on { animation: fade 1.6s ease 1s forwards; }
.bud { transform-box: fill-box; transform-origin: center; animation: pop .6s ease-out 3s backwards; }
@keyframes pop { from { transform: scale(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.wrap { animation: fade 1s ease-out backwards; }

.rose { position: absolute; width: 0; height: 0; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); }
.flower {
  position: absolute;
  left: 0;
  bottom: 0;
  margin-left: calc(var(--h) * -.43vmin);
  transform: rotate(var(--r)) scale(var(--k));
  width: calc(var(--h) * .86vmin);
  height: calc(var(--h) * 1vmin);
  background-image: linear-gradient(165deg, var(--c1), var(--c2) 46%, var(--c3));
  clip-path: polygon(28% 3%, 50% 0%, 72% 3%, 88% 16%, 98% 36%, 100% 54%, 90% 74%, 70% 90%, 50% 100%, 30% 90%, 10% 74%, 0% 54%, 2% 36%, 12% 16%);
  transform-origin: center bottom;
  animation: open-flower 2s 1s backwards;
  animation-delay: calc(1s + var(--d, 0s));
}
@keyframes open-flower {
  0%   { transform: rotate(calc(var(--r) * .4)) scale(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: rotate(var(--r)) scale(var(--k)); opacity: 1; }
}
.bloom-light {
  position: absolute; left: 0; z-index: 3; pointer-events: none;
  bottom: calc(var(--h) * .46vmin);
  width: calc(var(--h) * .18vmin); height: calc(var(--h) * .18vmin);
  margin-left: calc(var(--h) * -.09vmin); border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #ffd6e2, #c41642 58%, #6a1028);
  box-shadow: 0 0 4px #ff4d7a66;
  animation: fade .8s ease 2.3s backwards;
}

/* ---------- Zarf ---------- */
.envelope {
  position: absolute; left: 50%; top: 64.5%; translate: -50% 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  opacity: 0; pointer-events: none;
}
.envelope.show { opacity: 1; pointer-events: auto; animation: env-in 1s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.envelope:hover .env-svg { transform: scale(1.1) rotate(-3deg); }
.envelope:focus-visible { outline: 2px solid #ff8fab; outline-offset: 6px; border-radius: 8px; }
@keyframes env-in {
  from { opacity: 0; transform: translateY(5vmin) scale(.3) rotate(-14deg); }
}
.env-label {
  position: absolute; left: calc(100% + 8vmin); top: 50%; translate: 0 -50%;
  width: max-content; max-width: 19vmin; padding: .8vmin 1.6vmin; border-radius: 1.6vmin;
  font-family: var(--hand); font-weight: 700; font-size: clamp(15px, 3.2vmin, 24px); line-height: 1.1;
  color: #fff; background: #b3153a; text-align: left; box-shadow: 0 0 2vmin #ff4d7a66;
}
.env-label::before {
  content: ""; position: absolute; right: 100%; top: 50%; margin-top: -.9vmin;
  border: .9vmin solid transparent; border-right-color: #b3153a;
}
.mail-hint {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 22vh); left: 50%;
  translate: -50% 0; z-index: 4; margin: 0; padding: .28em .85em; border-radius: 999px;
  font-family: var(--hand); font-weight: 700; font-size: clamp(20px, 5vmin, 30px);
  color: #fff; background: #b3153a; box-shadow: 0 0 16px #ff4d7a66;
  white-space: nowrap; opacity: 0; pointer-events: none; display: none;
}
.mail-hint.on { animation: fade .8s ease forwards; }
@media (max-width: 640px) {
  .env-label { display: none; }
  .mail-hint { display: block; }
}
.env-svg {
  width: 15vmin; display: block; transition: transform .25s ease;
  filter: drop-shadow(0 .8vmin 1.6vmin #0009) drop-shadow(0 0 2vmin #ff6b9066);
  animation: bob 3s ease-in-out infinite;
}
@keyframes bob { 50% { translate: 0 -1.2vmin; } }

/* ---------- Mektup ---------- */
.letter-overlay {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; padding: 20px;
  background: #07060dd9; backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.letter-overlay.open { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.paper {
  position: relative; width: min(580px, 100%); max-height: calc(100% - 20px); overflow: auto;
  padding: 48px clamp(24px, 6vw, 48px) 36px;
  background:
    radial-gradient(circle at 14% 8%, #ffe4d8, transparent 36%),
    radial-gradient(circle at 92% 88%, #f4d0c4, transparent 28%),
    repeating-linear-gradient(0deg, transparent, transparent 2px, #f6e4da55 3px),
    linear-gradient(#fff8f2, #fff1e6);
  color: #4a2a33; border-radius: 3px 14px 10px 14px;
  box-shadow:
    0 2.5vmin 6vmin #000a,
    inset 0 0 0 1px #f0cfc4,
    inset 0 0 70px #f3d2c444;
  transform: translateY(8vh) rotate(-2deg) scale(.88);
  transition: transform .8s cubic-bezier(.2, 1, .3, 1);
}
.paper::before, .paper::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 1.5px solid #e7b7a8; opacity: .8;
}
.paper::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.paper::after { right: 14px; bottom: 14px; border-left: 0; border-top: 0; }
.letter-overlay.open .paper { transform: none; }
.letter-overlay.open.closing {
  opacity: 0;
  transition: opacity 1.25s ease, visibility 0s linear 1.25s;
}
.letter-overlay.open.closing .paper {
  transform: translateY(12vh) rotate(-2.5deg) scale(.9);
  transition: transform 1.15s ease;
}
.seal {
  width: 58px; height: 58px; margin: 4px auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, #ff6d88, #b3153a 62%, #7a1028);
  box-shadow: 0 8px 16px #9d123444, inset 0 0 0 3px #ffffff2e, inset 0 -8px 12px #5c0a1c55;
}
.paper-heart { display: block; width: 24px; margin: 0; }
.paper .kicker {
  margin: 0 0 8px; text-align: center; letter-spacing: .22em; text-transform: uppercase;
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 11px; font-weight: 600;
  color: #b3153a;
}
.paper .end-mark { text-align: center; margin: 18px 0 0; letter-spacing: .4em; color: #c45b73; }
.paper h1 {
  margin: 0 0 18px; padding-bottom: 10px; font-family: var(--hand); font-weight: 700;
  font-size: clamp(34px, 7vmin, 46px); line-height: 1.1; color: #b3153a;
  background: linear-gradient(#e0b056, #e0b056) center bottom / 72px 1px no-repeat;
}
.paper p {
  margin: 0 0 16px; font-family: var(--hand); font-weight: 500;
  font-size: clamp(22px, 4.4vmin, 28px); line-height: 1.5;
}
.paper .sign { text-align: right; margin: 22px 0 0; color: #b3153a; font-weight: 700; }
.gift-open {
  display: block; margin: 22px auto 6px; padding: 11px 22px;
  font-family: var(--hand); font-size: clamp(22px, 4.6vw, 28px); font-weight: 700; color: #fff;
  background: linear-gradient(#e8184f, #b3153a); border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 18px #b3153a33;
}
.gift-open:hover { filter: brightness(1.08); }
.gift-open:focus-visible { outline: 2px solid #b3153a; outline-offset: 3px; }
.gift-open.is-gone { display: none; }
.gift {
  margin: 22px 0 4px; padding: 20px 16px 16px; text-align: center; border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, #fff, transparent 58%),
    linear-gradient(#fff7f4, #ffe9ef);
  box-shadow: inset 0 0 0 1px #f0c3c8, 0 12px 24px #b3153a12;
}
.gift[hidden] { display: none; }
.gift.show { animation: rise .55s ease; }
.gift .gift-kicker {
  margin: 0 0 8px; font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #b3153a;
}
.gift .gift-title {
  margin: 0 0 16px; font-family: var(--hand); font-weight: 700;
  font-size: clamp(26px, 5.2vw, 34px); line-height: 1.15; color: #8e1a38;
}
.open .paper .gift p { animation: none; }
.gift-load {
  display: inline-block; margin-top: 2px; padding: 10px 20px;
  font-family: var(--hand); font-size: clamp(20px, 4.4vw, 26px); font-weight: 700;
  color: #fff; text-decoration: none; background: linear-gradient(#e8184f, #b3153a);
  border-radius: 999px; box-shadow: 0 8px 18px #b3153a33;
}
.gift-load:hover { filter: brightness(1.08); }
.gift-load:focus-visible { outline: 2px solid #b3153a; outline-offset: 3px; }
.present {
  position: fixed; inset: 0; z-index: 18;
  display: grid; place-items: center; padding: 24px;
  background: #07060d99; backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.present.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .7s ease; }
.present-box {
  position: relative; width: min(72vw, 250px); height: 250px;
  border: 0; padding: 0; background: none; cursor: pointer; color: inherit;
  perspective: 700px;
  animation: present-in 1.15s cubic-bezier(.2, 1, .3, 1);
}
.present-box:focus-visible { outline: 2px solid #ffd6e4; outline-offset: 8px; border-radius: 16px; }
@keyframes present-in { from { opacity: 0; transform: translateY(28px) scale(.84); } }
.present-lid, .present-base { position: absolute; left: 10%; right: 10%; }
.present-base {
  bottom: 48px; height: 112px; border-radius: 6px 6px 16px 16px;
  background:
    linear-gradient(90deg, transparent 46%, #fff4d4 46% 54%, transparent 54%),
    linear-gradient(180deg, #ff6d8c, #e8184f 28%, #9d1236);
  box-shadow: 0 22px 34px #0008, inset 0 0 0 2px #e0b056aa, inset 0 16px 20px #ffffff28;
}
.present-base::before {
  content: ""; position: absolute; left: 0; right: 0; top: 46%; height: 16px;
  background: linear-gradient(#f8e7c4, #e0b56a);
}
.present-lid {
  bottom: 152px; height: 48px; border-radius: 12px 12px 6px 6px;
  transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, transparent 46%, #fff6df 46% 54%, transparent 54%),
    linear-gradient(180deg, #ff8fab, #e8184f 40%, #c41642);
  box-shadow: 0 12px 18px #0006, inset 0 0 0 2px #e0b05699, inset 0 8px 12px #ffffff40;
  transition: transform .75s cubic-bezier(.2, .85, .2, 1);
}
.present-bow {
  position: absolute; left: 50%; top: -22px; width: 70px; height: 34px; transform: translateX(-50%);
}
.present-bow i {
  position: absolute; top: 2px; width: 30px; height: 24px; border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle at 35% 35%, #fff8ea, #f0c98a 55%, #c9844a);
  box-shadow: inset 0 -4px 6px #a86b3888;
}
.present-bow i:first-child { left: 2px; transform: rotate(-22deg); }
.present-bow i:last-child { right: 2px; transform: rotate(22deg); }
.present-bow::after {
  content: ""; position: absolute; left: 50%; top: 12px; width: 16px; height: 16px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6df, #e7c27a 60%, #c4844a);
}
.present-box.open .present-lid { transform: translateY(-46px) rotateX(-72deg); }
.present-hint {
  position: absolute; left: 0; right: 0; bottom: 4px; margin: 0;
  font-family: var(--hand); font-weight: 700; font-size: clamp(22px, 5vw, 30px);
  color: #ffd6e2; text-shadow: 0 0 14px #ff4d7a77;
  transition: opacity .35s ease;
}
.present-box.open .present-hint { opacity: 0; }
.present-box.gone { display: none; }
.present-card { position: relative; width: min(440px, 92vw); margin: 0; padding-top: 42px; }
.open .paper h1, .open .paper p, .open .paper .seal, .open .paper .gift-open {
  animation: rise .9s ease-out backwards;
  animation-delay: calc(.55s + var(--n, 0) * .4s);
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.close {
  position: absolute; top: 10px; right: 12px; padding: 6px 12px;
  font: inherit; font-size: 13px; color: #8a5a66;
  background: none; border: 1px solid #e5c3b9; border-radius: 999px; cursor: pointer;
}
.close:hover { background: #f8e2d8; }
.close:focus-visible { outline: 2px solid #b3153a; outline-offset: 2px; }

.replay {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; z-index: 4;
  padding: 10px 16px; font: inherit; font-size: 14px; color: var(--text);
  background: #1b0d1ccc; border: 1px solid #ff6b9055; border-radius: 999px; cursor: pointer;
  display: none;
}
.replay.on { display: block; }
.replay:hover { border-color: #ff6b90; color: #fff; }
.replay:focus-visible { outline: 2px solid #ff6b90; outline-offset: 3px; }

/* ---------- Kavanoz ve yapboz ---------- */
.scene-panel {
  position: absolute; inset: 0; z-index: 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 18px 32px; text-align: center;
  background:
    radial-gradient(ellipse at 50% 42%, #5a204655, transparent 52%),
    linear-gradient(#07060d44, #07060dcc);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.scene-panel.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .6s ease; }
.scene-kicker {
  margin: 0; max-width: 16ch; font-family: var(--hand); font-weight: 700;
  font-size: clamp(30px, 7vw, 46px); line-height: 1.05; color: #ffd6e2;
  text-shadow: 0 0 16px #ff4d7a77;
}
.scene-hint { margin: 0; color: var(--text); font-size: 15px; }
.scene-card {
  width: max-content; max-width: min(24em, 92vw);
  padding: 10px 22px 12px; border-radius: 22px;
  background: #1b0d1ce0; border: 1px solid #ff6b9077;
  box-shadow: 0 12px 28px #0007, inset 0 0 18px #ff4d7a22;
}
.scene-card .scene-hint { margin-top: 2px; }
.scene-card .puzzle-count { margin-top: 4px; }
.jar-scene {
  overflow: auto; justify-content: safe center; gap: 4px;
  background:
    radial-gradient(ellipse at 78% 11%, #ffe7c228, transparent 16%),
    radial-gradient(ellipse at 50% 48%, #ff5d8a38, transparent 34%),
    radial-gradient(ellipse at 50% 16%, #4a184866, transparent 42%),
    linear-gradient(#07060d55, #07060dd0);
}
.jar-scene .scene-kicker { max-width: 16em; font-size: clamp(28px, 6.2vw, 42px); }
.jar-nudge {
  position: absolute; z-index: 6; left: 0; top: 0;
  width: min(220px, 28vw); margin: 0; padding: 12px 16px 14px;
  border-radius: 22px; text-align: center; pointer-events: none;
  background: #1b0d1ce0; border: 1px solid #ff6b9077;
  box-shadow: 0 12px 28px #0007, inset 0 0 18px #ff4d7a22;
  font-family: var(--hand); font-weight: 700; font-size: clamp(20px, 4.6vw, 26px);
  line-height: 1.15; color: #ffe4ee; text-shadow: 0 0 12px #ff4d7a66;
  animation: balloon-pop .45s cubic-bezier(.2, 1.3, .4, 1);
}
.jar-nudge[hidden] { display: none; }
.jar-nudge p { margin: 0; }
.jar-nudge-arrow {
  position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.jar-nudge-arrow[hidden] { display: none; }
.jar-nudge-arrow path {
  fill: none; stroke: #ffd6e4; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px #ff4d7a);
}
@media (max-width: 720px) {
  .jar-nudge { width: 142px; font-size: 16px; padding: 8px 10px; }
}
.jar-moon {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 22px); right: 8%;
  width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 32%, #fffaf0, #f6d7a8 58%, #d7ae78);
  box-shadow: 14px 6px 0 -16px #07060d, 0 0 28px #ffe7c099, 0 0 60px #ffd7a444;
}
.jar-stage {
  position: relative; width: min(92vw, 460px); height: min(62vh, 460px);
  display: grid; place-items: center; overflow: visible; margin: 2px 0;
}
.jar-stage::before {
  content: ""; position: absolute; width: 78%; height: 46%; border-radius: 50%;
  background: radial-gradient(circle, #ffd7a355, #ff6b9033 42%, transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.jar {
  position: relative; z-index: 1; width: min(74vw, 300px);
  border: 0; padding: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 18px 16px #0008) drop-shadow(0 0 18px #ff8fb8aa);
  animation: jar-glow 2.8s ease-in-out infinite, jar-float 4.6s ease-in-out infinite;
}
.jar.pop { animation: jar-glow 2.8s ease-in-out infinite, jar-pop .55s ease; }
.jar svg { display: block; width: 100%; height: auto; }
.jar:focus-visible { outline: 2px solid #ff8fab; outline-offset: 8px; border-radius: 24px; }
@keyframes jar-glow { 50% { filter: drop-shadow(0 18px 16px #0008) drop-shadow(0 0 28px #fff) drop-shadow(0 0 22px #ff6b9d); } }
@keyframes jar-float { 50% { transform: translateY(-8px); } }
@keyframes jar-pop { 35% { transform: scale(1.07) translateY(-4px); } }
.jar-core, .floaty { transform-box: fill-box; transform-origin: center; }
.jar-core { animation: jar-core 2.4s ease-in-out infinite; }
.floaty { animation: slip 3.4s ease-in-out infinite; }
.floaty.d2 { animation-delay: -1.1s; }
.floaty.d3 { animation-delay: -2.1s; }
@keyframes jar-core { 50% { opacity: .55; } }
@keyframes slip { 50% { transform: translateY(-5px); } }
.firefly {
  position: absolute; z-index: 2; width: 5px; height: 5px; border-radius: 50%;
  background: #fff8dc; box-shadow: 0 0 8px #fff, 0 0 14px #ffd78a; pointer-events: none;
  animation: firefly 5.5s ease-in-out infinite;
}
.f1 { left: 12%; top: 28%; }
.f2 { right: 10%; top: 22%; animation-delay: -1.6s; }
.f3 { left: 18%; bottom: 18%; animation-delay: -3s; width: 3px; height: 3px; }
.f4 { right: 16%; bottom: 26%; animation-delay: -4.2s; }
@keyframes firefly {
  0%, 100% { transform: translate(0, 0); opacity: .25; }
  45% { opacity: 1; }
  60% { transform: translate(16px, -26px); opacity: .4; }
}
.jar-floor {
  position: absolute; left: 16%; right: 16%; bottom: 8%; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse, #ff8fb877, transparent 72%); pointer-events: none;
}
.jar-note {
  width: min(340px, 88vw); min-height: 78px; margin: 0;
  display: grid; place-items: center; padding: 12px 18px 14px;
  border-radius: 18px 20px 18px 8px; color: #6a3040;
  font-family: var(--hand); font-weight: 700; font-size: clamp(22px, 5vw, 30px); line-height: 1.2;
  background:
    radial-gradient(circle at 10% 0%, #fff, transparent 36%),
    repeating-linear-gradient(0deg, transparent, transparent 7px, #f3d5cc44 8px),
    linear-gradient(180deg, #fffaf6, #fff0e8);
  box-shadow: 0 16px 34px #0007, inset 0 0 0 1px #f3d0c4, inset 0 0 0 5px #fff8;
}
.jar-note::before {
  content: "♥"; color: #e8184f; font-size: 16px; line-height: 1;
}
.jar-note.fresh { animation: note-land .6s ease; }
@keyframes note-land {
  from { opacity: 0; transform: translateY(16px) rotate(-1.5deg); }
  to { opacity: 1; transform: none; }
}
.jar-marks { display: flex; gap: 7px; min-height: 14px; margin: 2px 0 4px; }
.jar-marks i {
  width: 7px; height: 7px; border-radius: 50%; background: #ffd6e222;
  box-shadow: inset 0 0 0 1px #ffd6e255;
}
.jar-marks i.on { background: #fff; box-shadow: 0 0 8px #fff, 0 0 12px #ff8fb8; }
.jar-bits { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
@media (max-height: 740px) {
  .jar { width: min(64vw, 250px); }
  .jar-stage { height: min(52vh, 360px); }
  .jar-note { min-height: 64px; font-size: 22px; }
  .jar-moon { width: 34px; height: 34px; }
}
.cosmos {
  --edge: 6%;
  --cosmos-y: 43%;
  --travel: 3.4s;
  --delay: .55s;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 8% 18%, #4a206888, transparent 26%),
    radial-gradient(ellipse at 92% 80%, #12305c99, transparent 30%),
    radial-gradient(ellipse at 50% 46%, #0c2248 0%, transparent 42%),
    #02040c;
}
.cosmos-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cosmos-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
}
.cosmos-bolt {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none;
}
.cosmos-sky .starfield,
.cosmos-sky .galaxy { display: none; }
.starfield, .starfield.far, .starfield.bright {
  position: absolute; inset: -8%; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12px 18px, #fff, transparent),
    radial-gradient(1px 1px at 48px 70px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 90px 28px, #fff, transparent),
    radial-gradient(1px 1px at 130px 96px, #d7e6ff, transparent),
    radial-gradient(1px 1px at 168px 46px, #fff, transparent),
    radial-gradient(1px 1px at 30px 120px, #ffe7c8, transparent),
    radial-gradient(1.3px 1.3px at 110px 150px, #fff, transparent),
    radial-gradient(1px 1px at 190px 130px, #fff, transparent),
    radial-gradient(1px 1px at 70px 170px, #fff, transparent),
    radial-gradient(1px 1px at 150px 12px, #fff, transparent);
  background-size: 150px 130px;
}
.starfield.far { opacity: .7; background-size: 90px 100px; background-position: 24px 12px; }
.starfield.bright {
  opacity: .9;
  background-size: 320px 280px;
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px, #fff, transparent),
    radial-gradient(2px 2px at 180px 40px, #fff, transparent),
    radial-gradient(1.4px 1.4px at 90px 160px, #ffe7c8, transparent),
    radial-gradient(1.8px 1.8px at 250px 120px, #fff, transparent),
    radial-gradient(1.3px 1.3px at 140px 220px, #d7ecff, transparent);
}
.milky {
  position: absolute; left: -22%; width: 144%;
  top: calc(var(--cosmos-y) - 28%); height: 58%;
  transform: rotate(-8deg); pointer-events: none;
  background:
    radial-gradient(ellipse at 16% 50%, #b7d4ff88, transparent 28%),
    radial-gradient(ellipse at 38% 48%, #1a4e92, transparent 36%),
    radial-gradient(ellipse at 52% 54%, #6e8ec4aa, transparent 30%),
    radial-gradient(ellipse at 66% 46%, #c46b7a99, transparent 24%),
    radial-gradient(ellipse at 78% 52%, #5c2a34, transparent 28%),
    radial-gradient(ellipse at 90% 48%, #1a3058, transparent 26%);
  filter: blur(4px); opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 78% 46% at 50% 50%, #000 24%, transparent 74%);
  mask-image: radial-gradient(ellipse 78% 46% at 50% 50%, #000 24%, transparent 74%);
}
.milky.core {
  top: calc(var(--cosmos-y) - 10%); height: 20%; filter: blur(10px); opacity: .8;
  mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, #b9d4ff99 18%, #fff8 40%, #ffd0dcbb 58%, #8eb4ff88 78%, transparent);
}
.milky.dust {
  background:
    radial-gradient(ellipse at 30% 50%, #040814ee, transparent 22%),
    radial-gradient(ellipse at 58% 48%, #1a0c12cc, transparent 18%),
    radial-gradient(ellipse at 74% 52%, #2a1208aa, transparent 20%);
  filter: blur(16px); mix-blend-mode: multiply; opacity: .8;
}
.distant {
  position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px #fff, 0 0 10px #9ec4ff;
}
.d1 { left: 14%; top: 18%; }
.d2 { left: 78%; top: 16%; width: 3px; height: 3px; }
.d3 { left: 26%; top: 74%; }
.d4 { left: 84%; top: 68%; }
.d5 { left: 46%; top: 14%; }
.galaxy, .planet { position: absolute; pointer-events: none; }
.g-spiral {
  width: 240px; height: 140px; left: -40px; top: 5%;
  border-radius: 50%; transform: rotate(-32deg);
  background:
    radial-gradient(ellipse at 50% 50%, #fff 0 2%, #d5e8ff 7%, transparent 16%),
    radial-gradient(ellipse at 22% 42%, transparent 10%, #d7e8ffcc 34%, transparent 58%),
    radial-gradient(ellipse at 78% 58%, transparent 8%, #ffc6d8aa 32%, transparent 56%),
    radial-gradient(ellipse at 50% 48%, transparent 20%, #8eb6ff66 46%, transparent 68%),
    radial-gradient(ellipse at 50% 50%, #1a3d78 0%, #08101e 56%, transparent 78%);
  box-shadow: 0 0 32px #6a9ae655;
}
.g-spiral::before, .g-spiral::after {
  content: ""; position: absolute; inset: 8% -12%; border-radius: 50%; filter: blur(1px);
}
.g-spiral::before {
  background: linear-gradient(115deg, transparent 32%, #d7e8ff99 49%, transparent 64%);
  transform: rotate(18deg);
}
.g-spiral::after {
  background: linear-gradient(70deg, transparent 30%, #ffc6d888 48%, transparent 66%);
  transform: rotate(-24deg);
}
.g-edge {
  width: 230px; height: 36px; right: -36px; top: 62%;
  border-radius: 50%; transform: rotate(14deg);
  background:
    radial-gradient(ellipse at 50% 50%, #fff 0 5%, #f6d7cc 12%, #d4899a 26%, #24365c 52%, transparent 74%);
  box-shadow: 0 0 22px #d4899a55;
}
.g-edge::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 46%; height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #07060e 18%, #120910 50%, #07060e 82%, transparent);
}
.g-far {
  width: 128px; height: 86px; right: 5%; top: 7%;
  border-radius: 50%; transform: rotate(18deg); opacity: .95;
  background:
    radial-gradient(ellipse at 50% 50%, #fff 0 3%, #f2e8ff 9%, transparent 18%),
    radial-gradient(ellipse at 30% 46%, transparent 12%, #e6d6ffcc 36%, transparent 58%),
    radial-gradient(ellipse at 72% 54%, transparent 10%, #ffc6de99 34%, transparent 56%),
    radial-gradient(ellipse at 50% 50%, #5c3e98 0%, #140c28 64%, transparent 78%);
  box-shadow: 0 0 20px #7a5ab866;
}
.g-far::after {
  content: ""; position: absolute; inset: 18% -8%; border-radius: 50%;
  background: linear-gradient(100deg, transparent 34%, #f0e4ffaa 50%, transparent 66%);
  transform: rotate(-18deg);
}
.planet { border-radius: 50%; animation: planet-drift 8s ease-in-out infinite; }
.jupiter {
  width: 40px; height: 40px; right: 16%; top: 58%; animation-delay: -1.6s;
  background:
    radial-gradient(circle at 32% 30%, #fff6, transparent 24%),
    repeating-linear-gradient(180deg, #f3d7b0 0 4px, #e7b07a 4px 7px, #fff6e4 7px 9px, #c9844a 9px 12px);
  box-shadow: inset -8px -6px 10px #6a3e18, 0 0 16px #e7b07a44;
}
.venus {
  width: 30px; height: 30px; right: 20%; top: 20%; animation-delay: -2.4s;
  background:
    radial-gradient(circle at 32% 30%, #fff8, transparent 26%),
    radial-gradient(circle at 42% 42%, #fff4d2, #e6c56a 62%, #b8893a);
  box-shadow: inset -7px -5px 8px #7a5a20, 0 0 14px #e6c56a55;
}
.neptune {
  width: 34px; height: 34px; left: 26%; top: 70%; animation-delay: -3.5s;
  background:
    radial-gradient(circle at 32% 30%, #fff6, transparent 24%),
    radial-gradient(circle at 42% 44%, #9ec8ff, #2f6fe0 60%, #123a86);
  box-shadow: inset -8px -6px 10px #0c2458, 0 0 16px #4a8ef066;
}
.mercury {
  width: 16px; height: 16px; right: 28%; top: 46%; animation-delay: -5s;
  background:
    radial-gradient(circle at 32% 30%, #fff6, transparent 28%),
    radial-gradient(circle at 42% 42%, #d5d0c4, #6e6a62 72%);
  box-shadow: inset -4px -3px 5px #2e2c28, 0 0 10px #d5d0c444;
}
.saturn {
  width: 46px; height: 46px; left: 18%; top: 60%;
  background:
    radial-gradient(circle at 32% 30%, #fff8, transparent 26%),
    radial-gradient(circle at 42% 42%, #f6e7c8, #c9a56a 55%, #7c5a32 80%);
  box-shadow: inset -10px -6px 12px #4e3818, 0 0 18px #e6d2a244;
}
.saturn .ring {
  position: absolute; left: 50%; top: 52%; width: 98px; height: 28px;
  margin: 0; border: 0; animation: none; opacity: 1;
  transform: translate(-50%, -50%) rotate(-24deg);
  border-radius: 50%; background: transparent;
  box-shadow:
    0 0 0 1px #fff8,
    0 0 0 3px #f6e7c8dd,
    0 0 0 6px #b88948bb,
    0 0 0 8px #f3e0b899,
    0 0 0 10px #6a4828aa;
}
.earth {
  width: 38px; height: 38px; left: 22%; top: 22%;
  background:
    radial-gradient(circle at 30% 28%, #fff8, transparent 22%),
    radial-gradient(circle at 62% 46%, #fff 0 10%, transparent 12%),
    radial-gradient(circle at 68% 62%, #3f9a55 0 14%, transparent 16%),
    radial-gradient(circle at 36% 58%, #2f8a48 0 12%, transparent 14%),
    radial-gradient(circle at 40% 40%, #7ec8f0, #1d5f98 64%, #0c2c4c);
  box-shadow: inset -8px -6px 10px #071e36, 0 0 16px #4aa3e866;
}
.earth::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 62%, #8fd4ff66 74%, transparent 80%);
}
.mars {
  width: 20px; height: 20px; right: 24%; top: 34%; animation-delay: -3s;
  background:
    radial-gradient(circle at 32% 30%, #fff6, transparent 28%),
    radial-gradient(circle at 42% 42%, #ee8662, #8e341e 74%);
  box-shadow: inset -5px -3px 6px #4a160e, 0 0 12px #ee866244;
}
.moon {
  width: 11px; height: 11px; right: 22%; top: 68%; animation-delay: -2s;
  background: radial-gradient(circle at 35% 32%, #fff, #d5d0c6 58%, #8d887e);
  box-shadow: inset -2px -2px 3px #3e3b36;
}
@keyframes planet-drift { 50% { translate: 0 -7px; } }
.cosmos-kicker {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 22px); left: 50%; right: auto;
  z-index: 2; width: max-content; max-width: calc(100% - 32px);
  margin: 0; padding: 8px 22px; transform: translateX(-50%);
  border-radius: 22px;
  background: #1b0d1ce0; border: 1px solid #ff6b9077;
  box-shadow: 0 12px 28px #0007, inset 0 0 18px #ff4d7a22;
}
.cosmos-line {
  position: absolute; z-index: 2; left: 50%; bottom: max(22px, env(safe-area-inset-bottom, 0px));
  width: min(22em, 90vw); margin: 0; padding: 12px 20px;
  font-family: var(--hand); font-weight: 700; font-size: clamp(24px, 5.4vw, 38px); line-height: 1.2;
  color: #ffe4ee; text-shadow: 0 0 16px #ff4d7a88; opacity: 0;
  transform: translateX(-50%);
  border-radius: 22px;
  background: #1b0d1ce0; border: 1px solid #ff6b9077;
  box-shadow: 0 12px 28px #0007, inset 0 0 18px #ff4d7a22;
}
.cosmos-ask {
  position: absolute; z-index: 2; left: 50%; top: 24%; margin: 0;
  font-family: var(--hand); font-weight: 700; font-size: clamp(34px, 8vw, 58px);
  color: #ffd6e2; text-shadow: 0 0 16px #ff4d7a77; opacity: 0;
  transform: translateX(-50%);
}
.cosmos.on .cosmos-ask { animation: ask calc(var(--delay) + var(--travel)) ease forwards; }
@keyframes ask {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  14% { opacity: 1; transform: translateX(-50%); }
  76% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
.cosmos-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wave-window {
  position: absolute; top: var(--cosmos-y); height: min(32vh, 220px);
  width: 0; overflow: hidden; transform: translateY(-50%);
}
.wave-window.left { left: 0; }
.wave-window.right { right: 0; }
.cosmos.play .wave-window {
  animation: open-half var(--travel) cubic-bezier(.45, .05, .2, 1) var(--delay) forwards;
}
@keyframes open-half { to { width: 50%; } }
.cosmos-waves {
  position: absolute; top: 0; height: 100%; width: 100vw; overflow: visible;
}
.wave-window.left .cosmos-waves { left: 0; }
.wave-window.right .cosmos-waves { right: 0; }
.wave {
  fill: none; stroke: #fff; stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.wave.soft { stroke: rgba(255, 220, 236, .55); stroke-width: 7px; }
.wave.pink { stroke: #ffe4f2; }
.orb { position: absolute; top: var(--cosmos-y); }
.orb {
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; opacity: 0;
  box-shadow: 0 0 8px #fff, 0 0 18px #fff, 0 0 36px #d7ecff, 0 0 70px #7eb6ff;
}
.orb::before, .orb i {
  content: ""; position: absolute; left: 50%; top: 50%; background: #fff;
  transform: translate(-50%, -50%); pointer-events: none;
}
.orb::before {
  width: 78px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff 46%, #fff 54%, transparent);
  filter: drop-shadow(0 0 4px #fff);
}
.orb i {
  width: 1.5px; height: 78px;
  background: linear-gradient(transparent, #fff 46%, #fff 54%, transparent);
  filter: drop-shadow(0 0 4px #fff);
}
.orb::after {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.35) 28%, transparent 68%);
}
.orb.left { left: var(--edge); }
.orb.right { left: calc(100% - var(--edge)); }
.cosmos.play .orb.left { animation: to-center-l var(--travel) cubic-bezier(.45, .05, .2, 1) var(--delay) forwards; }
.cosmos.play .orb.right { animation: to-center-r var(--travel) cubic-bezier(.45, .05, .2, 1) var(--delay) forwards; }
@keyframes to-center-l {
  0% { left: var(--edge); opacity: 0; }
  10% { opacity: 1; }
  100% { left: 50%; opacity: 1; }
}
@keyframes to-center-r {
  0% { left: calc(100% - var(--edge)); opacity: 0; }
  10% { opacity: 1; }
  100% { left: 50%; opacity: 1; }
}
.cosmos.meet .orb.left, .cosmos.meet .orb.right {
  left: 50%;
  animation: orb-fade .45s ease forwards;
}
@keyframes orb-fade { to { opacity: 0; transform: scale(2.2); } }
.cosmos-heart {
  position: absolute; left: 50%; top: var(--cosmos-y); z-index: 2;
  width: min(48vw, 230px); opacity: 0; pointer-events: none;
  transform: translate(-50%, -54%) scale(.25);
  filter: drop-shadow(0 0 16px #ff4d7a) drop-shadow(0 0 36px #ffb3d0);
  border: 0; padding: 0; background: none; color: inherit; cursor: pointer;
}
.cosmos.meet .cosmos-heart { pointer-events: auto; }
.cosmos-heart:focus-visible { outline: 2px solid #ffd6e4; outline-offset: 6px; }
.cosmos-tap {
  position: absolute; left: 50%; bottom: calc(100% + 6px); margin: 0;
  transform: translateX(-50%); white-space: nowrap; opacity: 0;
  font-family: var(--hand); font-weight: 700; font-size: clamp(26px, 6vw, 40px);
  color: #ffe4ee; text-shadow: 0 0 16px #ff4d7a99; pointer-events: none;
}
.cosmos.meet .cosmos-tap { animation: tap-in .8s ease .45s forwards; }
@keyframes tap-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%); }
}
.cosmos-heart-body {
  position: relative; display: block;
  transform: scale(1); transform-origin: 50% 54%;
  transition: transform .45s cubic-bezier(.2, 1.4, .32, 1), filter .45s ease;
}
.cosmos.meet .cosmos-heart:hover .cosmos-heart-body,
.cosmos.meet .cosmos-heart:focus-visible .cosmos-heart-body {
  transform: scale(1.14);
  filter: drop-shadow(0 0 14px #ff8fab);
}
.cosmos.meet .cosmos-heart:active .cosmos-heart-body,
.cosmos.meet .cosmos-heart.pop .cosmos-heart-body {
  transform: scale(1.28);
  filter: drop-shadow(0 0 22px #ffd0e4);
  transition-duration: .28s;
}
.cosmos-heart svg { display: block; width: 100%; height: auto; }
.cosmos-ring {
  position: absolute; inset: -18%; border-radius: 50%; border: 2px solid #ffd6e4; opacity: 0;
}
.cosmos.meet .cosmos-heart { animation: heart-bloom .9s cubic-bezier(.2, 1.25, .3, 1) forwards; }
.cosmos.meet .cosmos-ring { animation: cosmos-ring .9s ease forwards; }
@keyframes heart-bloom {
  0% { opacity: 0; transform: translate(-50%, -54%) scale(.25); }
  70% { opacity: 1; transform: translate(-50%, -54%) scale(1.06); }
  100% { opacity: 1; transform: translate(-50%, -54%) scale(1); }
}
@keyframes cosmos-ring {
  0% { opacity: .75; transform: scale(.45); }
  100% { opacity: 0; transform: scale(1.7); }
}
.cosmos.meet .cosmos-line { animation: line-in 1s ease .2s forwards; }
@keyframes line-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to { opacity: 1; transform: translateX(-50%); }
}
@media (max-height: 740px) {
  .cosmos { --cosmos-y: 40%; }
  .cosmos-heart { width: min(40vw, 170px); }
  .cosmos-ask { top: 20%; }
  .cosmos-line { font-size: 22px; }
}
.scene-next {
  display: none; margin-top: 8px; padding: 12px 22px;
  font: inherit; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer;
  background: linear-gradient(#e8184f, #b3153a); border: 0; border-radius: 999px;
  box-shadow: 0 8px 22px #e8184f44;
}
.scene-next.show { display: inline-block; }
.scene-next:hover { filter: brightness(1.1); }
.scene-next:focus-visible { outline: 2px solid #ff8fab; outline-offset: 3px; }
.capsule-scene { overflow: auto; justify-content: safe center; }
.capsule-scene .scene-kicker { max-width: 12em; }
.machine {
  position: relative; width: min(88vw, 330px); height: min(58vh, 470px); margin: 6px 0 0;
  filter: drop-shadow(0 18px 22px #0008);
}
.machine-glow {
  position: absolute; left: 12%; right: 18%; bottom: 0; height: 22px; border-radius: 50%;
  background: radial-gradient(ellipse, #ff4d7a99, transparent 72%); filter: blur(4px);
}
.globe-ring {
  position: absolute; left: 50%; top: 0; width: 74%; aspect-ratio: 1; transform: translateX(-50%);
  padding: 7px; border-radius: 50%; z-index: 3;
  background:
    radial-gradient(circle at 30% 18%, #fff8, transparent 16%),
    linear-gradient(155deg, #fff1c8, #e0b056 36%, #8d6230 72%, #f6e2b8);
  box-shadow: 0 0 0 2px #6a4018, 0 10px 18px #0006, inset 0 0 0 1px #fff7;
}
.globe {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 68% 78%, #ff8fab33, transparent 30%),
    radial-gradient(circle at 50% 62%, #ffd0e418, #140c16 76%);
  box-shadow: inset 0 0 0 2px #ffffff55, inset -16px -20px 28px #0006, inset 8px 10px 16px #fff2;
}
.globe-shine {
  position: absolute; left: 14%; top: 8%; z-index: 4; width: 34%; height: 42%;
  border-radius: 50%; pointer-events: none; transform: rotate(-28deg);
  background: linear-gradient(160deg, #fffc, transparent 68%);
}
.globe::after {
  content: ""; position: absolute; left: 20%; right: 22%; bottom: 7%; z-index: 4; height: 16%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, #ffffff44, transparent 72%);
}
.pill, .deco {
  position: absolute; width: 26px; height: 34px; border-radius: 50%; --tilt: -12deg;
  box-shadow: inset 0 8px 6px #fff8, inset 0 -7px 8px #0003, 0 4px 6px #0006;
  animation: capsule-bob 3.6s ease-in-out infinite;
}
.pill { z-index: 2; }
.deco { z-index: 1; }
.deco.d2 { --tilt: 14deg; animation-duration: 4.4s; }
.pill::before, .deco::before, .falling::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 48%; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #fff9, transparent);
}
.pill::after, .deco::after, .falling::after {
  content: ""; position: absolute; left: 22%; top: 12%; width: 40%; height: 24%;
  border-radius: 50%; background: #fff; opacity: .8; transform: rotate(-22deg); pointer-events: none;
}
.pill.egg, .deco.egg, .falling.egg {
  background: none; box-shadow: none; border-radius: 0;
  width: 28px; height: 36px;
}
.pill.egg::before, .pill.egg::after,
.deco.egg::before, .deco.egg::after,
.falling.egg::before, .falling.egg::after { display: none; }
.egg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.falling.egg { margin-left: -14px; }
.falling.slow.egg { width: 36px; height: 46px; margin-left: -18px; }
  background: linear-gradient(#fff8e6, #f0c96e 42%, #c4844a);
  box-shadow: inset 0 8px 6px #fff8, 0 0 12px #f0c96ecc;
}
@keyframes capsule-bob {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50% { transform: translateY(-5px) rotate(var(--tilt)); }
}
.machine-collar {
  position: absolute; left: 50%; top: 47%; z-index: 4; width: 30%; height: 7%;
  transform: translateX(-50%); border-radius: 5px;
  background: linear-gradient(#fff1c8, #e0b056 42%, #8d6230);
  box-shadow: 0 4px 0 #6a4018, inset 0 1px 0 #fff8;
}
.machine-body {
  position: absolute; left: 15%; right: 18%; top: 52%; bottom: 10%; z-index: 2;
  border-radius: 16px 16px 20px 20px;
  background:
    linear-gradient(90deg, #ffffff22, transparent 18%, transparent 82%, #0003),
    linear-gradient(180deg, #ff6b8a 0%, #e8184f 26%, #b3153a 68%, #7a1028);
  box-shadow:
    inset 0 0 0 2px #e0b05677, inset 10px 0 16px #ffffff24, inset -12px 0 16px #0004, 0 16px 20px #0006;
}
.machine-body::before {
  content: ""; position: absolute; left: 10px; top: 10px; bottom: 16px; width: 10px; border-radius: 8px;
  background: linear-gradient(#ffffff55, transparent);
}
.machine-plaque {
  position: absolute; left: 50%; top: 10%; width: 64%; height: 36%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 2px solid #e0b056;
  background: linear-gradient(#3a1824, #140910);
  box-shadow: inset 0 0 14px #ff4d7a55, 0 4px 8px #0006;
}
.machine-heart { width: 34px; height: 30px; }
.machine-heart path { fill: #e8184f; filter: drop-shadow(0 0 6px #ff4d7a); }
.machine-slot {
  position: absolute; left: 50%; bottom: 10%; width: 62%; height: 24%; transform: translateX(-50%);
  border-radius: 8px 8px 14px 14px; border: 2px solid #e0b056aa;
  background: linear-gradient(#0c060a, #2a121c 70%);
  box-shadow: inset 0 10px 14px #000e;
}
.machine-slot::after {
  content: ""; position: absolute; inset: 4px; border-radius: 6px 6px 10px 10px;
  background: linear-gradient(180deg, #ffffff2e, transparent 46%);
  border: 1px solid #ffffff22;
}
.machine-base {
  position: absolute; left: 8%; right: 12%; bottom: 2%; z-index: 1; height: 7%;
  border-radius: 6px 6px 16px 16px;
  background: linear-gradient(#fff1c8, #c9844a 45%, #6a4018);
  box-shadow: 0 8px 12px #0007, inset 0 1px 0 #fff8;
}
.lever {
  position: absolute; right: 0; top: 55%; z-index: 5; width: 72px; height: 132px;
  border: 0; padding: 0; background: none; cursor: pointer;
}
.lever:focus-visible { outline: 2px solid #ffd6e4; outline-offset: 4px; border-radius: 12px; }
.lever-mount {
  position: absolute; left: 0; top: 10px; width: 26px; height: 40px; border-radius: 7px;
  background: linear-gradient(#fff1c8, #c9844a);
  box-shadow: inset 0 1px 0 #fff8, 0 4px 6px #0006;
}
.lever-stem {
  position: absolute; left: 20px; top: 6px; width: 11px; height: 92px; border-radius: 8px;
  background: linear-gradient(90deg, #fff1c8, #a86b32);
  transform-origin: 50% 18px; transition: transform .32s ease;
  box-shadow: 2px 3px 4px #0005;
}
.lever.pull .lever-stem { transform: rotate(48deg); }
.cap-reel {
  position: absolute; z-index: 6; left: calc(100% + 14px); top: 66%;
  transform: translateY(-50%); min-width: 62px; height: 62px; padding: 0 12px;
  display: grid; place-items: center; overflow: hidden; pointer-events: none;
  border-radius: 18px; border: 2px solid #e0b056;
  background: linear-gradient(#2a1420, #12080e);
  box-shadow: 0 10px 22px #0008, inset 0 0 16px #ff4d7a33;
  font-family: var(--hand); font-weight: 700; font-size: 38px; line-height: 1;
  color: #ffe4ee; text-shadow: 0 0 12px #ff4d7a;
}
.cap-reel[hidden] { display: none; }
.cap-reel.pop span { animation: reel-tick .38s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes reel-tick {
  0% { transform: translateY(-80%); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.cap-reel.jackpot {
  min-width: 118px; height: 72px; border-color: #ffe9a8; color: #fff6d0;
  background: linear-gradient(#3a2412, #140c08);
  font-size: 42px; letter-spacing: 1px;
  animation: jackpot-pulse .45s ease-in-out infinite alternate;
}
.cap-reel.jackpot i {
  display: inline-block;
  animation: digit-lock .42s cubic-bezier(.2, 1.55, .4, 1) both;
}
.cap-reel.jackpot i:nth-child(2) { animation-delay: .12s; }
.cap-reel.jackpot i:nth-child(3) { animation-delay: .24s; }
@keyframes digit-lock {
  0% { transform: translateY(-130%); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes jackpot-pulse {
  from { box-shadow: 0 0 12px #f0c96e88, inset 0 0 12px #ffd56a44; }
  to { box-shadow: 0 0 28px #ffe9a8, 0 0 42px #ff4d7aaa, inset 0 0 18px #ffd56a77; }
}
@media (max-width: 640px) {
  .machine { width: min(62vw, 240px); margin-right: 78px; }
  .cap-reel { left: calc(100% + 8px); right: auto; top: 64%; min-width: 52px; height: 52px; font-size: 32px; }
  .cap-reel.jackpot { right: auto; min-width: 96px; height: 58px; font-size: 34px; }
}
.lever-knob {
  position: absolute; left: 50%; bottom: -16px; width: 34px; height: 34px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #ff4d74 42%, #7a1028);
  box-shadow: 0 0 12px #ff4d7a99, 0 6px 8px #0007;
}
.falling {
  position: absolute; left: 46%; top: 40%; z-index: 6; width: 26px; height: 34px; margin-left: -13px;
  border-radius: 50%; box-shadow: inset 0 8px 6px #fff8, 0 6px 8px #0007;
  animation: cap-drop .72s cubic-bezier(.35, .05, .7, 1) forwards;
}
.falling.slow {
  width: 34px; height: 44px; margin-left: -17px;
  box-shadow: inset 0 8px 6px #fff8, 0 0 22px #f0c96e, 0 8px 14px #0007;
  animation: cap-drop-slow 1.7s cubic-bezier(.18, .7, .2, 1) forwards;
}
@keyframes cap-drop {
  0% { top: 38%; }
  100% { top: 76%; }
}
@keyframes cap-drop-slow {
  0% { top: 26%; transform: scale(.65); filter: brightness(1.5); }
  45% { top: 50%; transform: scale(1.2); }
  100% { top: 76%; transform: scale(1.45); filter: brightness(1.9); }
}
.capsule-note {
  display: none; position: relative; box-sizing: border-box;
  width: min(250px, 78vw); min-height: 148px; margin: 22px 0 8px; padding: 34px 28px 40px;
  font-family: var(--hand); font-weight: 700; font-size: clamp(20px, 4.8vw, 28px); line-height: 1.15;
  color: #5a1834; text-align: center;
}
.capsule-note.balloon {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, #fff, transparent 22%),
    radial-gradient(circle at 50% 58%, #fff, var(--balloon, #ffb3cc) 72%, #e07098);
  box-shadow: inset -10px -14px 18px #c4487266, 0 16px 28px #0006;
  animation: balloon-pop .5s cubic-bezier(.2, 1.35, .4, 1);
}
.capsule-note.balloon::after {
  content: ""; position: absolute; left: 50%; bottom: 10px; width: 14px; height: 12px; margin-left: -7px;
  background: #d45886; clip-path: polygon(20% 0, 80% 0, 50% 100%);
}
@keyframes balloon-pop {
  0% { opacity: 0; transform: translateY(22px) scale(.5); }
  70% { transform: translateY(-6px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.capsule-finale {
  position: absolute; left: 0; right: 0; top: 34%; z-index: 5; margin: 0;
  font-family: var(--hand); font-weight: 700; font-size: clamp(42px, 10vw, 72px); line-height: 1;
  color: #fff8ee; text-shadow: 0 0 12px #fff, 0 0 28px #ffd56a, 0 0 48px #ff4d7a;
  animation: finale-in .7s ease; pointer-events: none;
}
.capsule-finale[hidden] { display: none; }
@keyframes finale-in {
  from { opacity: 0; transform: scale(.7); }
  to { opacity: 1; transform: scale(1); }
}
.capsule-scene:has(.capsule-photo:not([hidden])) > :not(.capsule-photo) { visibility: hidden; }
.capsule-photo {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px 18px calc(96px + env(safe-area-inset-bottom, 0px));
  background: transparent; overflow: auto;
  animation: fade .8s ease;
}
.capsule-photo[hidden] { display: none; }
.capsule-photo img {
  width: min(88vw, 460px); max-height: min(52vh, 560px); object-fit: contain;
  border-radius: 18px; background: #1a1016;
  box-shadow: 0 18px 40px #000c, 0 0 0 3px #f0c96e;
}
.capsule-missing {
  max-width: 22em; margin: 0; padding: 10px 16px; border-radius: 18px;
  color: #ffc2d1; font-size: 15px;
  background: #1b0d1ccc; border: 1px solid #ff6b9055;
}
.capsule-caption,
.capsule-continue {
  border-radius: 22px;
  background: #1b0d1ce0;
  border: 1px solid #ff6b9077;
  box-shadow: 0 12px 28px #0007, inset 0 0 18px #ff4d7a22;
}
.capsule-caption {
  margin: 0; max-width: min(18em, 92vw); padding: 12px 20px;
  font-family: var(--hand); font-weight: 700; font-size: clamp(22px, 5vw, 32px); line-height: 1.2;
  color: #ffe4ee; text-shadow: 0 0 16px #ff4d7a77;
}
.capsule-continue {
  position: absolute; left: 0; right: 0; width: max-content; max-width: calc(100% - 32px);
  margin: 0 auto; bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding: 8px 22px; cursor: pointer;
  font-family: var(--hand); font-weight: 700; font-size: clamp(24px, 5.6vw, 36px);
  color: #ffe4ee; text-shadow: 0 0 16px #ff4d7a88;
  animation: hint 2.2s ease-in-out infinite;
}
.capsule-continue:hover { border-color: #ff8fab; filter: brightness(1.08); }
.capsule-continue:focus-visible { outline: 2px solid #ff8fab; outline-offset: 4px; }
.puzzle-board {
  position: relative; width: min(74vw, 320px, 40vh); aspect-ratio: 1;
  margin-top: 6px; border-radius: 18px; overflow: hidden; touch-action: none;
  background: #1a1016;
  box-shadow:
    0 0 0 1px #e0b056cc,
    0 0 0 7px #1b0d1ce6,
    0 0 0 8px #ff8fab66,
    0 18px 40px #0008,
    0 0 28px #ff6b9033;
}
.puzzle-scene { justify-content: safe center; overflow: auto; }
.slot { position: absolute; width: calc(100% / 3); height: calc(100% / 3); box-shadow: inset 0 0 0 1px #ffd6e233; }
.slot.hot { background: #ff8fab33; box-shadow: inset 0 0 0 2px #ffd6e2; }
.puzzle-tray {
  display: grid; grid-template-columns: repeat(3, min(20vw, 78px));
  gap: 8px; justify-content: center; margin-top: 12px; min-height: 64px;
}
.piece {
  position: relative; overflow: hidden;
  border-radius: 8px; background: #2a1822;
  box-shadow: 0 6px 14px #0008; touch-action: none; cursor: grab; user-select: none;
}
.piece-photo { position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none; }
.piece.in-tray { width: 100%; aspect-ratio: 1; }
.piece.on-board { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.piece.dragging { position: fixed; z-index: 30; inset: auto; margin: 0; cursor: grabbing; border-radius: 8px; }
.piece.picked { box-shadow: 0 0 0 2px #fff, 0 0 16px #ffb3d0; }
.piece.shake { animation: shake .45s; }
.piece.home { box-shadow: inset 0 0 12px #fff6, 0 0 10px #ffd0e488; cursor: default; }
.puzzle-board.complete .piece.home { box-shadow: none; }
.puzzle-count { margin: 0; min-height: 1.2em; font-size: 13px; letter-spacing: .04em; color: #ffc2d1; }
.puzzle-done {
  position: absolute; left: 0; right: 0; top: 16%; z-index: 4; margin: 0;
  font-family: var(--hand); font-weight: 700; font-size: clamp(36px, 8vw, 56px);
  color: #fff; text-shadow: 0 0 18px #fff, 0 0 28px #ff70c4; opacity: 0; pointer-events: none;
}
.puzzle-scene.done .puzzle-done { animation: fade .4s ease forwards; }
.puzzle-scene.done .scene-card { opacity: 0; }
.puzzle-next { display: none; }
.puzzle-scene.done .puzzle-next { display: block; }
.puzzle-scene.done { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.fx { position: absolute; inset: 0; z-index: 12; pointer-events: none; overflow: hidden; }
.bit {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bc, #fff);
  box-shadow: 0 0 8px var(--bc, #fff), 0 0 14px #ffd0e4;
  animation: bitfly .95s ease-out forwards;
}
@keyframes bitfly { to { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0; } }
.flash {
  position: absolute; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #ffe9a8 28%, transparent 70%);
  animation: flash .7s ease-out forwards;
}
@keyframes flash { to { transform: scale(2.6); opacity: 0; } }
.ring {
  position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2px solid #ffd56a; box-shadow: 0 0 16px #ffd56a, inset 0 0 10px #fff6;
  animation: ringout .9s ease-out forwards;
}
@keyframes ringout { to { transform: scale(7); opacity: 0; } }
.streak {
  position: absolute; width: 3px; height: 18px; border-radius: 3px;
  background: linear-gradient(var(--bc, #fff), transparent);
  box-shadow: 0 0 8px var(--bc, #fff);
  animation: streakfly 1.2s ease-out forwards;
}
@keyframes streakfly {
  0% { transform: translate(0, 0) rotate(var(--rot)) scaleY(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scaleY(.35); opacity: 0; }
}

.scene-card,
.cosmos-kicker,
.cosmos-line,
.jar-nudge,
.capsule-caption,
.capsule-continue {
  background:
    linear-gradient(180deg, #ffd6e218, transparent 34%),
    linear-gradient(180deg, #2a1426ee, #120910ea);
  border-color: #ff8fab88;
  box-shadow:
    0 16px 32px #0008,
    inset 0 1px 0 #fff5,
    inset 0 0 20px #ff4d7a16,
    0 0 0 1px #e0b05644;
}
.dedication {
  box-shadow:
    0 12px 28px #0005,
    inset 0 1px 0 #fff4,
    inset 0 0 18px #ff4d7a22,
    0 0 0 1px #e0b05655;
}
.gate button,
.scene-next,
.gift-open,
.gift-load {
  border: 1px solid #ffd6e266;
  background:
    linear-gradient(180deg, #ffffff55, transparent 46%),
    linear-gradient(#e8184f, #b3153a);
  box-shadow: 0 10px 22px #e8184f55, inset 0 1px 0 #fff7;
}
.replay {
  background:
    linear-gradient(180deg, #ffd6e214, #140910e6);
  border-color: #e0b05677;
  box-shadow: 0 8px 18px #0006, inset 0 1px 0 #fff4;
}
.gift {
  border: 1px solid #e0b05688;
  box-shadow: inset 0 0 0 1px #fff8, 0 12px 24px #b3153a14;
}
.paper .kicker { letter-spacing: .28em; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; }
  .heart, .hint, .env-svg, .spark, .sky i, .sky .petal, .drift { animation: none !important; }
  .cosmos.meet .wave-window { width: 50%; }
  .cosmos.meet .cosmos-tap { opacity: 1; transform: translateX(-50%); }
  .cosmos.meet .orb { opacity: 0; }
  .cosmos.meet .cosmos-heart { opacity: 1; transform: translate(-50%, -54%) scale(1); }
  .cosmos.meet .cosmos-line { opacity: 1; transform: translateX(-50%); }
  .cosmos.on .cosmos-ask { opacity: 0; }
  .capsule-continue, .capsule-finale { animation: none; opacity: 1; }
}

/* ---------- Fotoğraf katmanları ---------- */
.gate-form:has(.gate-photo-heart) > .gate-heart { display: none; }
.gate-photo-heart {
  display: block; width: 96px; height: auto; margin: 0 auto 4px; object-fit: contain;
  animation: beat 1.8s ease-in-out infinite; transform-origin: 50% 60%;
}
.heart-wrap:has(.photo-heart) > svg.heart { display: none; }
.heart-wrap .photo-heart { width: 100%; margin: 0 auto; }
.jar:has(.jar-photo) svg { display: none; }
.jar-stage:has(.jar-photo) .jar-floor { display: none; }
.jar-photo { display: block; width: 100%; height: auto; }
.cosmos-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.cosmos-sky:has(.cosmos-photo) .cosmos-canvas,
.cosmos-sky:has(.cosmos-photo) .milky,
.cosmos-sky:has(.cosmos-photo) .distant { display: none; }
.planet { z-index: 2; }
.planet:has(img) { background: none; box-shadow: none; border-radius: 0; height: auto; overflow: visible; }
.planet img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 16px #000a); }
.saturn:has(img) { width: min(24vw, 176px); left: 16%; top: 58%; }
.saturn:has(img) .ring { display: none; }
.jupiter:has(img) { width: min(20vw, 146px); right: 14%; top: 56%; }
.earth:has(img) { width: min(12vw, 88px); left: 20%; top: 18%; }
.earth:has(img)::after { display: none; }
.venus:has(img) { width: min(11vw, 80px); right: 18%; top: 16%; }
.neptune:has(img) { width: min(13vw, 96px); left: 5%; top: 40%; }
.mars:has(img) { width: min(8vw, 52px); right: 24%; top: 32%; }
.mercury:has(img) { width: min(6.5vw, 44px); left: 28%; top: 30%; }
.moon:has(img) { width: min(5.5vw, 36px); right: 28%; top: 70%; }
@media (max-width: 720px) {
  .saturn:has(img) { width: min(30vw, 118px); left: 4%; top: 64%; }
  .jupiter:has(img) { width: min(26vw, 100px); right: 2%; top: 62%; }
  .earth:has(img) { width: min(16vw, 62px); left: 6%; top: 22%; }
  .venus:has(img) { width: min(15vw, 56px); right: 6%; top: 20%; }
  .neptune:has(img) { width: min(18vw, 70px); left: 2%; top: 46%; }
  .mars:has(img) { width: min(11vw, 40px); right: 16%; top: 36%; }
  .mercury:has(img) { width: min(10vw, 34px); left: 24%; top: 40%; }
  .moon:has(img) { width: min(8vw, 28px); right: 18%; top: 74%; }
}
.cosmos-heart-body:has(.photo-heart) svg { display: none; }
.cosmos-heart-body .photo-heart { display: block; width: 100%; height: auto; }
.cosmos.meet .cosmos-stage::after {
  content: ""; position: absolute; left: 50%; top: var(--cosmos-y); z-index: 1;
  width: 46vmin; height: 46vmin; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd0e488 28%, transparent 68%);
  animation: meet-burst 1.15s ease-out forwards;
}
@keyframes meet-burst {
  from { opacity: .95; transform: translate(-50%, -50%) scale(.15); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}
.machine-photo {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; object-position: center; pointer-events: none;
}
.machine:has(.machine-photo) .machine-glow,
.machine:has(.machine-photo) .globe-ring,
.machine:has(.machine-photo) .machine-collar,
.machine:has(.machine-photo) .machine-body,
.machine:has(.machine-photo) .machine-base { opacity: 0; }
.machine:has(.machine-photo) .lever { z-index: 4; right: 2%; top: 48%; }
.machine:has(.machine-photo) .falling,
.machine:has(.machine-photo) .cap-reel { z-index: 5; }
.egg img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.falling:has(img), .falling.slow:has(img) {
  background: none; box-shadow: none; border-radius: 0;
}
.falling:has(img) { width: 54px; height: 70px; margin-left: -27px; }
.falling.slow:has(img) { width: 68px; height: 88px; margin-left: -34px; }
.photo-rose {
  width: calc(var(--h) * 3.6vmin); height: auto;
  margin-left: calc(var(--h) * -1.8vmin);
  margin-top: calc(var(--h) * -2.5vmin);
  z-index: 2; transform-origin: 50% 70%;
  animation: rose-bloom 1.05s ease-out both;
  animation-delay: calc(.15s + var(--d));
}
.photo-rose img {
  display: block; width: 100%; height: auto;
  transform-origin: 50% 78%;
  animation: rose-sway 6.4s ease-in-out infinite;
  animation-delay: calc(.15s + var(--d) + 1.05s);
}
@keyframes rose-bloom {
  0% { opacity: 0; transform: translateY(14px) scale(.86) rotate(var(--rot)); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot)); }
}
@keyframes rose-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(2.2deg) translateY(-1.4%); }
}
.present-box:has(.present-photo) {
  display: block; width: min(82vw, 320px); height: auto;
  padding: 0 0 46px; perspective: none;
}
.present-box:has(.present-photo).gone { display: none; }
.present-box:has(.present-photo)::before {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 46px;
}
.present-box:has(.present-photo) .present-lid,
.present-box:has(.present-photo) .present-base { display: none; }
.present-photo {
  display: block; position: relative; z-index: 1; width: 100%; height: auto; margin: 0 auto;
  pointer-events: auto;
  filter: drop-shadow(0 22px 24px #000a);
  transform-origin: 50% 80%;
  transition: transform .75s cubic-bezier(.2, .85, .2, 1);
}
.present-box.open .present-photo { transform: translateY(-36px) scale(1.04) rotate(-2deg); }
.piece.home { animation: piece-lock .55s ease; }
@keyframes piece-lock { from { filter: brightness(1.7); } to { filter: none; } }
.puzzle-board.complete { animation: puzzle-settle .8s ease; }
@keyframes puzzle-settle {
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@media (max-width: 720px) {
  .machine:has(.machine-photo) .lever { right: 0; top: 50%; }
}