/* ─────────────────────────────────────────────────────────────────────────────
   The invitation itself — the screens the invited person walks through.

   Loaded on the public /i/{uid} page AND inside the builder's phone preview, so
   every rule here has to survive at 300px wide with no page chrome around it.
   That is why the root is .inv rather than body: the preview cannot own the
   document.

   Themes are CSS variables on [data-inv-theme]. Adding one is six lines and no
   markup change.
   ────────────────────────────────────────────────────────────────────────────── */

.inv {
    --bg: linear-gradient(165deg, #ffe3f1 0%, #ffc2de 48%, #ff9ecd 100%);
    --fg: #2b1420;
    --fg-soft: #7a5568;
    --card: rgba(255, 255, 255, .78);
    --edge: rgba(43, 20, 32, .12);
    --accent: #ff2e88;
    --accent-fg: #ffffff;
    --no-bg: rgba(255, 255, 255, .9);
    --no-fg: #7a5568;
    --glow: none;

    position: relative;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Everything inside is sized against THIS box, not the viewport. The same
       markup renders full-screen on a phone and inside a 300px preview frame on
       a desktop — with vw units the preview took its type size from the monitor
       and the question overflowed the phone in both directions. */
    container-type: inline-size;

    background: var(--bg);
    color: var(--fg);
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
}

.inv[data-inv-theme="neon"] {
    --bg: radial-gradient(60% 50% at 50% 0%, #4a0d33 0%, #16060f 70%), #16060f;
    --fg: #ffe6f3;
    --fg-soft: #d79bbd;
    --card: rgba(255, 46, 136, .1);
    --edge: rgba(255, 122, 184, .38);
    --accent: #ff2e88;
    --accent-fg: #ffffff;
    --no-bg: rgba(255, 255, 255, .07);
    --no-fg: #d79bbd;
    --glow: 0 0 28px rgba(255, 46, 136, .75);
}

.inv[data-inv-theme="retro"] {
    --bg: linear-gradient(160deg, #ffd6ec 0%, #d9c6ff 52%, #bfe9ff 100%);
    --fg: #3a1a4d;
    --fg-soft: #7a5b91;
    --card: rgba(255, 255, 255, .74);
    --edge: rgba(58, 26, 77, .16);
    --accent: #ff3ea5;
    --accent-fg: #ffffff;
    --no-bg: rgba(255, 255, 255, .9);
    --no-fg: #7a5b91;
    --glow: none;
}

.inv[data-inv-theme="bubble"] {
    --bg: linear-gradient(170deg, #fff2f8 0%, #ffe0f0 40%, #d7f2ff 100%);
    --fg: #26364d;
    --fg-soft: #6c7f99;
    --card: rgba(255, 255, 255, .82);
    --edge: rgba(38, 54, 77, .1);
    --accent: #ff5fa2;
    --accent-fg: #ffffff;
    --no-bg: rgba(255, 255, 255, .92);
    --no-fg: #6c7f99;
    --glow: none;
}

.inv[data-inv-theme="midnight"] {
    --bg: radial-gradient(70% 55% at 50% 8%, #2c1b57 0%, #0d0820 72%), #0d0820;
    --fg: #f2e9ff;
    --fg-soft: #b0a0d0;
    --card: rgba(255, 255, 255, .07);
    --edge: rgba(255, 255, 255, .16);
    --accent: #ff4d9d;
    --accent-fg: #ffffff;
    --no-bg: rgba(255, 255, 255, .08);
    --no-fg: #b0a0d0;
    --glow: 0 0 30px rgba(255, 77, 157, .55);
}

.inv[data-inv-theme="sunset"] {
    --bg: linear-gradient(165deg, #ffd9e8 0%, #ffb3c8 40%, #ffb27a 100%);
    --fg: #4a1f2c;
    --fg-soft: #8a5a5f;
    --card: rgba(255, 255, 255, .76);
    --edge: rgba(74, 31, 44, .14);
    --accent: #ff3d7f;
    --accent-fg: #ffffff;
    --no-bg: rgba(255, 255, 255, .9);
    --no-fg: #8a5a5f;
    --glow: none;
}

/* ── Stage ─────────────────────────────────────────────────────────────────── */

.inv .inv-stage {
    position: relative;
    flex: 1;
    display: flex;
    min-height: 0;
}

/* One screen at a time. Kept in the DOM so a step back is instant. */
.inv .scr {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(9px, 3.4cqi, 14px);
    padding: 26px clamp(14px, 6cqi, 20px) 30px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .34s var(--ease, cubic-bezier(.22,1,.36,1)),
                transform .34s var(--ease, cubic-bezier(.22,1,.36,1)),
                visibility .34s;

    /* Scrolls when a long question needs it, but never sideways and never with a
       visible bar — a scrollbar drawn across the invitation reads as a broken page. */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.inv .scr::-webkit-scrollbar { width: 0; height: 0; }
.inv .scr.on { opacity: 1; visibility: visible; transform: none; }

.inv .inv-mascot {
    font-size: 54px;
    font-size: clamp(36px, 17cqi, 58px);
    line-height: 1;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .16));
    animation: inv-bob 2.6s ease-in-out infinite;
}
@keyframes inv-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-10px) rotate(4deg); }
}

.inv .inv-cover {
    width: 120px;
    width: clamp(80px, 36cqi, 124px);
    aspect-ratio: 1;
    height: auto;
    border-radius: 28%;
    object-fit: cover;
    border: 3px solid var(--accent);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .4), var(--glow);
}

.inv .inv-from {
    font-size: .72rem;
    font-size: clamp(.6rem, 2.7cqi, .72rem);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-soft);
}

.inv .inv-q {
    font-family: 'Unbounded', 'Manrope', sans-serif;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.08;
    font-size: 1.6rem;
    /* Container units, not vw. A long Ukrainian word ("погуляти?") has no break
       opportunity, so if the type is sized to anything but the box it is sitting
       in, it runs straight off both edges. */
    font-size: clamp(1.05rem, 8.4cqi, 2.1rem);
    text-wrap: balance;
    overflow-wrap: break-word;
    max-width: 100%;
}

.inv .inv-sub {
    font-size: .92rem;
    font-size: clamp(.76rem, 3.4cqi, .92rem);
    font-weight: 600;
    color: var(--fg-soft);
    max-width: 22em;
    overflow-wrap: break-word;
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.inv .inv-actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
    /* The runaway button is positioned against this box, so it can wander the
       whole width of the screen without escaping the layout. */
    width: 100%;
}

.inv .inv-btn {
    font: inherit;
    font-weight: 800;
    font-size: 1.02rem;
    font-size: clamp(.85rem, 3.9cqi, 1.02rem);
    padding: 15px 32px;
    padding: clamp(11px, 4.4cqi, 15px) clamp(20px, 9cqi, 32px);
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: var(--accent);
    color: var(--accent-fg);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5), var(--glow);
    transition: scale .28s var(--bounce, cubic-bezier(.34,1.56,.64,1)), filter .18s;
    -webkit-tap-highlight-color: transparent;
}
.inv .inv-btn:hover { filter: brightness(1.06); }
.inv .inv-btn:active { filter: brightness(.94); }

/* Grows every time "ні" gets away. Driven by the `scale` PROPERTY, not by
   transform — the runaway button uses `translate` for the same reason, so the
   two never fight over one transform string. */
.inv .inv-btn.yes { scale: var(--yes-scale, 1); }

.inv .inv-btn.no {
    background: var(--no-bg);
    color: var(--no-fg);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .35);
    border: 1px solid var(--edge);
    translate: var(--no-x, 0) var(--no-y, 0);
    transition: translate .16s ease-out, scale .28s var(--bounce, cubic-bezier(.34,1.56,.64,1)), opacity .3s;
    scale: var(--no-scale, 1);
}
.inv .inv-btn.no.gone { opacity: 0; pointer-events: none; }

/* ── Choices ───────────────────────────────────────────────────────────────── */

.inv .inv-title {
    font-family: 'Unbounded', 'Manrope', sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    font-size: 1.25rem;
    font-size: clamp(.98rem, 6.4cqi, 1.5rem);
    overflow-wrap: break-word;
    max-width: 100%;
}

.inv .inv-opts {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 2.6cqi, 9px);
    width: 100%;
    max-width: 300px;
    margin-top: 6px;
}

.inv .inv-opt {
    font: inherit;
    font-weight: 700;
    font-size: .98rem;
    font-size: clamp(.84rem, 3.7cqi, .98rem);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    padding: clamp(11px, 4.2cqi, 14px) clamp(14px, 5.5cqi, 18px);
    border-radius: 18px;
    border: 2px solid var(--edge);
    background: var(--card);
    color: var(--fg);
    cursor: pointer;
    text-align: left;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .14s var(--bounce, cubic-bezier(.34,1.56,.64,1)), border-color .16s, background .16s;
}
.inv .inv-opt:hover { transform: translateY(-2px); border-color: var(--accent); }
.inv .inv-opt.on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .5), var(--glow);
}
.inv .inv-opt .em { font-size: 1.2rem; line-height: 1; }

.inv .inv-note {
    width: 100%;
    max-width: 300px;
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    padding: 13px 16px;
    border-radius: 18px;
    border: 2px solid var(--edge);
    background: var(--card);
    color: var(--fg);
    outline: none;
    resize: vertical;
    min-height: 92px;
}
.inv .inv-note:focus { border-color: var(--accent); }
.inv .inv-note::placeholder { color: var(--fg-soft); font-weight: 500; }

.inv .inv-skip {
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: var(--fg-soft);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 6px;
}

/* Progress pips, so a five-screen invitation does not feel endless. */
.inv .inv-pips { display: flex; gap: 6px; justify-content: center; padding: 14px 0 4px; }
.inv .inv-pips i {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--fg-soft); opacity: .3;
    transition: opacity .25s, width .25s;
}
.inv .inv-pips i.on { opacity: 1; width: 20px; border-radius: 999px; background: var(--accent); }

/* ── Finale ────────────────────────────────────────────────────────────────── */

.inv .inv-finale .inv-mascot { font-size: 72px; animation: inv-pop .7s var(--bounce, cubic-bezier(.34,1.56,.64,1)); }
@keyframes inv-pop { from { transform: scale(.3) rotate(-25deg); opacity: 0; } to { transform: none; opacity: 1; } }

.inv .inv-recap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 300px;
    margin-top: 6px;
}
.inv .inv-recap div {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--card);
    border: 1px solid var(--edge);
    font-size: .92rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.inv .inv-recap small { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-soft); font-weight: 800; }
.inv .inv-recap b { font-weight: 800; }

.inv .inv-foot {
    padding: 10px 16px 16px;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-soft);
    opacity: .7;
}
.inv .inv-foot a { text-decoration: underline; text-underline-offset: 2px; }

/* Confetti. Spawned by JS, cleaned up by animationend. */
.inv .confetti {
    position: absolute;
    top: -14px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 8;
    animation: fall linear forwards;
}
@keyframes fall {
    from { transform: translateY(0) rotate(0deg); opacity: 1; }
    to   { transform: translateY(115%) rotate(680deg); opacity: .9; }
}

/* A preview must not look like the real thing to the person testing it. */
.inv .inv-preview-tag {
    position: absolute;
    top: 10px; left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
    .inv .inv-mascot, .inv .confetti { animation: none !important; }
    .inv .scr { transition: opacity .01s; }
}

/* The full-page version — the real link, opened on somebody's phone. */
.inv-page { position: fixed; inset: 0; }
.inv-page > .inv { height: 100%; }