/* Приглашение: общий вид для превью, демо и страницы получателя */

.inv {
  --bg1: #FFE3EC; --bg2: #FFF6F9; --card: #fff; --ink: #3A1530; --muted: #8A6479;
  --accent: #FF3D72; --accent2: #FF8FA8; --soft: #EFE2EA; --softInk: #7A6573; --deco: #FF9DB8;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(170deg, var(--bg1), var(--bg2) 70%);
  color: var(--ink);
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.inv *, .inv *::before, .inv *::after { box-sizing: border-box; }
.inv [hidden] { display: none !important; }

/* фоновые сердечки */
.inv-bg { position: absolute; inset: 0; pointer-events: none; }
.inv-deco {
  position: absolute; color: var(--deco); opacity: .35; width: 1em; height: 1em; line-height: 1;
  animation: inv-float 9s ease-in-out infinite;
}
.inv-deco svg { width: 100%; height: 100%; display: block; }
@keyframes inv-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}

/* шкала прогресса */
.inv-progress { display: none; position: absolute; left: 22px; right: 22px; top: 18px; height: 8px; border-radius: 8px; z-index: 3;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 5px, transparent 5px 10px); }
.with-progress .inv-progress { display: block; }
.inv-progress-fill { height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 8px; background: var(--accent); transition: width .5s cubic-bezier(.3, 1.4, .6, 1); }
.inv-progress-heart { position: absolute; top: 50%; left: calc(var(--p, 0) * 100%); width: 26px; height: 26px; color: var(--accent);
  transform: translate(-50%, -52%); transition: left .5s cubic-bezier(.3, 1.4, .6, 1); filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.inv-progress-heart svg { width: 100%; height: 100%; display: block; }

.inv-stage {
  position: absolute; inset: 0; z-index: 1;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: 24px 18px;
  scrollbar-width: none;
}
.inv-stage::-webkit-scrollbar { display: none; }
.with-progress .inv-stage { padding-top: 46px; }
.screen { margin: auto 0; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.screen.enter { animation: inv-enter .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes inv-enter { from { opacity: 0; transform: translateY(16px) scale(.97); } }

/* ---------- карточка и формы ---------- */
.card-wrap { position: relative; width: 100%; max-width: 380px; }
.card {
  position: relative; isolation: isolate;
  padding: 26px 22px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.card-shape { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--card); border-radius: 28px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 11%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 5%, transparent); }
[data-shape="wave"] .card { padding: 34px 26px 32px; }
[data-shape="wave"] .card-shape { background: none; box-shadow: none; border-radius: 0; }
.card-bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--ink) 12%, transparent)); }
.card-bg path { fill: var(--card); }
[data-shape="ticket"] .card { padding: 28px 30px 26px; }
[data-shape="ticket"] .card-shape, [data-shape="ticket"] .card-wrap::before {
  border-radius: 22px; box-shadow: none;
  -webkit-mask: radial-gradient(circle 15px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 15px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 15px at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 15px at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
}
[data-shape="ticket"] .card-wrap::before { content: ''; position: absolute; inset: 0; transform: translateY(7px); background: color-mix(in srgb, var(--accent) 22%, transparent); }
[data-shape="ticket"] .card::after {
  content: ''; position: absolute; inset: 9px; border: 2px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 15px; pointer-events: none; z-index: -1;
}
[data-shape="polaroid"] .card { padding: 14px 14px 22px; transform: rotate(-1.4deg); }
[data-shape="polaroid"] .card-shape { border-radius: 6px; }
[data-shape="polaroid"] .card .inv-media:first-child {
  width: 100%; background: var(--soft); border-radius: 3px; padding: 16px 0; margin-bottom: 4px;
}
[data-shape="polaroid"] .inv-title { font-family: 'Caveat', 'Nunito', cursive; font-weight: 700; font-size: 32px; line-height: 1.05; }

.inv-title { margin: 0; font-size: 23px; line-height: 1.22; font-weight: 800; letter-spacing: -.01em; white-space: pre-line; overflow-wrap: anywhere; }
.inv-sub { margin: -4px 0 0; color: var(--muted); font-size: 15px; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- медиа ---------- */
.inv-media { display: flex; align-items: center; justify-content: center; }
.inv-media-sticker.size-md { width: 140px; height: 140px; }
.inv-media-sticker.size-lg { width: 170px; height: 170px; }
.inv-media-sticker img, .inv-media-sticker svg { width: 100%; height: 100%; }
.inv-media-image img { max-width: 100%; max-height: 220px; border-radius: 18px; display: block; object-fit: cover; }
[data-shape="polaroid"] .inv-media-image img { border-radius: 2px; max-height: 240px; }
.inv-media-audio { width: 100%; }

.voice { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px; padding: 10px 14px 10px 10px; border-radius: 22px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.voice-play { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); cursor: pointer; position: relative; }
.voice-play::before { content: ''; position: absolute; left: 16px; top: 13px; border-left: 14px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.voice.playing .voice-play::before { left: 14px; top: 13px; width: 5px; height: 16px; border: 0; background: #fff; box-shadow: 9px 0 0 #fff; }
.voice-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 30px; cursor: pointer; }
.voice-wave i { flex: 1; border-radius: 2px; background: color-mix(in srgb, var(--accent) 35%, transparent); transition: background .15s; }
.voice-wave i.on { background: var(--accent); }
.voice-time { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 32px; text-align: right; }

.circle { position: relative; width: 190px; height: 190px; border-radius: 50%; cursor: pointer; }
.circle video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--soft); }
.circle-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.circle-ring circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 302; stroke-dashoffset: 302; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.circle-hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 700;
  background: rgba(0,0,0,.45); color: #fff; white-space: nowrap; pointer-events: none; }
.circle.sound .circle-hint { display: none; }

/* ---------- кнопки ---------- */
.inv-btns { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; margin-top: 4px; }
.inv-btn {
  width: 100%; max-width: 280px; min-height: 50px; padding: 12px 20px; border: 0; border-radius: 999px;
  font: 800 17px/1.15 'Nunito', system-ui, sans-serif; cursor: pointer;
  transition: transform .3s cubic-bezier(.3, 1.5, .6, 1), opacity .2s, filter .2s;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.inv-btn.yes { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
.inv-btn.yes:active { filter: brightness(.95); }
.inv-btn.no { color: var(--softInk); background: var(--soft); }
.inv-btn.ghost { width: auto; min-height: 42px; font-size: 15px; background: color-mix(in srgb, var(--card) 70%, transparent); color: var(--muted); }
.inv-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.inv-btn.shake { animation: inv-shake .45s; }
.inv-btn.wiggle { animation: inv-wiggle .4s; }
.inv-btn.vanish { opacity: 0; transform: scale(.1) !important; }
.inv-btn.flip { animation: inv-flip .45s; }
.inv-btn.runaway { position: absolute; z-index: 5; pointer-events: auto; transition: left .28s cubic-bezier(.3, 1.4, .6, 1), top .28s cubic-bezier(.3, 1.4, .6, 1); max-width: none; }
@keyframes inv-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px) rotate(-3deg); } 40% { transform: translateX(8px) rotate(3deg); } 60% { transform: translateX(-6px) rotate(-2deg); } 80% { transform: translateX(6px) rotate(2deg); } }
@keyframes inv-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -6deg; } 75% { rotate: 6deg; } }
@keyframes inv-flip { 50% { transform: rotateX(90deg); } }

.inv-made { position: relative; z-index: 2; font-size: 13px; color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 20px;
  background: color-mix(in srgb, var(--card) 60%, transparent); }

/* ---------- замки ---------- */
.gate-center { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 10px 0; }
.gate-hint { margin: 0; font-size: 16px; font-weight: 700; color: var(--muted); text-align: center; }

.gate-code { width: 100%; max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.code-dashes { display: flex; gap: 12px; margin: 6px 0 10px; }
.code-dashes span { width: 34px; height: 44px; border-bottom: 3px solid color-mix(in srgb, var(--ink) 25%, transparent); font-size: 28px; font-weight: 800; line-height: 44px; transition: border-color .2s; }
.code-dashes span.on { border-color: var(--accent); }
.code-dashes.bad { animation: inv-shake .45s; }
.code-dashes.bad span { border-color: #e5484d; color: #e5484d; }
.code-dashes.ok span { border-color: #22b07d; color: #22b07d; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.keypad button { height: 52px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--ink) 10%, transparent); background: var(--card);
  color: var(--ink); font: 700 21px 'Nunito', sans-serif; cursor: pointer; touch-action: manipulation; }
.keypad button:active { background: var(--soft); transform: scale(.96); }
.keypad .del { font-size: 18px; }

.envelope { position: relative; width: 230px; height: 150px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; transition: transform .45s, opacity .45s; }
.envelope:hover { transform: translateY(-3px) rotate(-1deg); }
.env-back, .env-front, .env-flap, .env-letter { position: absolute; left: 0; width: 100%; display: block; }
.env-back { top: 0; height: 100%; border-radius: 10px; background: color-mix(in srgb, var(--accent) 75%, #000 10%); }
.env-letter { left: 8%; width: 84%; top: 10px; height: 82%; border-radius: 8px; background: var(--card); color: var(--accent);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14px; transition: transform .6s .45s cubic-bezier(.3, 1.3, .6, 1); }
.env-letter svg { width: 34px; height: 34px; }
.env-front { bottom: 0; height: 100%; border-radius: 10px; background: var(--accent);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); z-index: 2; }
.env-flap { top: 0; height: 62%; background: color-mix(in srgb, var(--accent) 80%, #fff 20%); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; transition: transform .5s; z-index: 3; border-radius: 10px 10px 0 0; }
.env-seal { position: absolute; left: 50%; top: 52%; width: 40px; height: 40px; margin: -20px 0 0 -20px; z-index: 4; color: #fff;
  background: color-mix(in srgb, var(--accent) 60%, #000 25%); border-radius: 50%; padding: 9px; transition: opacity .25s; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.env-seal svg { width: 100%; height: 100%; display: block; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.envelope.open .env-seal { opacity: 0; }
.envelope.open .env-letter { transform: translateY(-62%); }
.envelope.fly { transform: scale(1.3); opacity: 0; }

.gift { border: 0; background: none; padding: 0; cursor: pointer; transition: transform .45s, opacity .45s; }
.gift.wiggle { animation: inv-gift .45s; }
.gift.fly { transform: scale(1.6); opacity: 0; }
@keyframes inv-gift { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-12deg) scale(1.08); } 75% { transform: rotate(12deg) scale(1.08); } }
.gift-dots { display: flex; gap: 8px; }
.gift-dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); transition: background .2s, transform .2s; }
.gift-dots i.on { background: var(--accent); transform: scale(1.2); }

.hold { position: relative; width: 150px; height: 150px; border: 0; background: none; padding: 0; cursor: pointer; color: var(--soft);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .45s, opacity .45s; }
.hold svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--accent) 25%, transparent)); }
.hold-fill { position: absolute; inset: 0; color: var(--accent); clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0); }
.hold.holding { animation: inv-beat .6s infinite; }
.hold.fly { transform: scale(1.5); opacity: 0; }
@keyframes inv-beat { 50% { transform: scale(1.07); } }

.countdown { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: .02em; }

.scratch-layer { position: absolute; inset: 0; z-index: 6; transition: opacity .6s; }
.scratch-layer.gone { opacity: 0; pointer-events: none; }
.scratch { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.scratch-label { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #fff; pointer-events: none;
  font: 800 24px 'Nunito', sans-serif; text-shadow: 0 2px 10px rgba(0,0,0,.15); transition: opacity .4s; }

/* ---------- дата ---------- */
.inv-field { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 280px; text-align: left; font-size: 14px; font-weight: 700; color: var(--muted); }
.inv-input { width: 100%; height: 46px; padding: 0 14px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: var(--card); color: var(--ink); font: 700 16px 'Nunito', sans-serif; -webkit-appearance: none; appearance: none; }
.inv-input:focus { outline: none; border-color: var(--accent); }
[data-theme="night"] .inv-input { color-scheme: dark; }
.date-pill { padding: 10px 20px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); font-size: 20px; font-weight: 800; }

/* ---------- выбор ---------- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 4px; }
.choice-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px 12px; min-height: 104px;
  border-radius: 18px; border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); background: var(--card); color: var(--ink);
  font: 700 15px/1.2 'Nunito', sans-serif; cursor: pointer; transition: transform .2s, border-color .2s, background .2s; touch-action: manipulation; }
.choice-tile:active { transform: scale(.96); }
.choice-tile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); transform: scale(1.03); }
.choice-grid.odd .choice-tile:last-child { grid-column: span 2; }
.item-img { width: 46px; height: 46px; object-fit: contain; }
.item-img.photo { width: 64px; height: 64px; object-fit: cover; border-radius: 14px; }
.item-emoji { font-size: 40px; line-height: 1; }
.choice-name { font-size: 14px; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; max-width: 100%; }

/* ---------- частицы ---------- */
.inv-fx { position: absolute; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
.fx-p { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 20px; line-height: 22px; text-align: center;
  animation: fx-fly 1.2s cubic-bezier(.15, .7, .3, 1) forwards; }
.fx-p svg, .fx-rain svg { width: 100%; height: 100%; display: block; }
@keyframes fx-fly {
  0% { transform: translate(0, 0) scale(.2) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(var(--s)) rotate(var(--r)); opacity: 0; }
}
.fx-confetti { width: 9px; height: 14px; border-radius: 2px; margin: -7px 0 0 -4px; }
.fx-rain { position: absolute; top: -30px; width: 24px; height: 24px; animation: fx-fall linear forwards; opacity: .9; }
.fx-rain.fx-confetti { width: 9px; height: 14px; }
@keyframes fx-fall {
  to { transform: translate(var(--sway), var(--fall, 900px)) rotate(240deg) scale(var(--s)); }
}

@media (prefers-reduced-motion: reduce) {
  .inv-deco, .hold.holding { animation: none; }
  .screen.enter { animation-duration: .01s; }
}