/* ===========================================================================
   THE INVITATION BRIEF — beat two of the arrival ceremony.

   It reuses the starter grant's chrome verbatim (`starter-reward-overlay`,
   `-card`, `-mark`, `-eyebrow`, `-title`, `-cta` in starter-reward.css) and
   overrides ONLY the palette, so the two screens are recognisably the same
   object. The previous version rebuilt the card from scratch with no frame at
   all and read as a different, cheaper product.

   Gold is a payout. Violet is a promise. That is the whole distinction, and it
   is what lets the payout screen land later with its own weight.
   =========================================================================== */

.invite-welcome-overlay {
    /* Above the grant it follows, so a slow close can never sandwich it. */
    z-index: 10040;
    background:
        radial-gradient(circle at 50% 38%, rgba(126, 96, 214, 0.34), transparent 46%),
        rgba(5, 3, 14, 0.9);
}

.invite-welcome-card {
    border-color: rgba(196, 172, 255, 0.55);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.09), transparent 42%),
        radial-gradient(circle at 50% 0, rgba(168, 132, 255, 0.18), transparent 46%),
        linear-gradient(155deg, #241a3e 0%, #150e28 58%, #0b0817 100%);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.62),
        0 0 56px rgba(132, 96, 224, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.invite-welcome-card::before {
    border-color: rgba(206, 186, 255, 0.13);
}

/* The mark is the same crescent; only the light it is lit by changes. */
.invite-welcome-card .starter-reward-mark {
    filter: drop-shadow(0 0 24px rgba(168, 132, 255, 0.4));
}

.invite-welcome-card .starter-reward-moon {
    fill: #cdb6ff;
    stroke: #ece2ff;
}

.invite-welcome-card .starter-reward-star {
    fill: #f4edff;
    filter: drop-shadow(0 0 8px rgba(190, 158, 255, 0.95));
}

.invite-welcome-card .starter-reward-glint {
    fill: #ffe6a6;
}

.invite-welcome-card .starter-reward-halo {
    stroke: rgba(198, 172, 255, 0.26);
}

.invite-welcome-eyebrow {
    color: #c2a8f2;
}

.invite-welcome-body {
    margin: 10px 0 0;
    font-size: clamp(0.9rem, 2.6vw, 1.02rem);
    line-height: 1.5;
    color: rgba(232, 220, 250, 0.84);
}

/* ---------------------------------------------------------------------------
   The terms, given the weight of the amount line on the grant screen. The
   reward is gold even here: it is the one element that IS a payout.
   --------------------------------------------------------------------------- */
.invite-welcome-reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 16px 0 12px;
}

.invite-welcome-reward-amount {
    color: #ffd875;
    font-size: clamp(1.5rem, 6vw, 2.1rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    text-shadow: 0 0 26px rgba(255, 197, 92, 0.34);
}

.invite-welcome-reward-condition {
    color: rgba(232, 220, 250, 0.78);
    font-size: clamp(0.82rem, 2.4vw, 0.95rem);
    letter-spacing: 0.01em;
}

/* One pip per required match. A denominator is what turns "not yet" into a
   countdown rather than a refusal. */
.invite-welcome-progress {
    display: flex;
    justify-content: center;
    gap: clamp(6px, 1.6vw, 12px);
    margin: 0 auto 8px;
}

.invite-welcome-pip {
    width: clamp(26px, 7vw, 46px);
    height: clamp(5px, 1.2vw, 8px);
    border-radius: 999px;
    background: rgba(232, 220, 250, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.invite-welcome-pip--done {
    background: linear-gradient(90deg, #ffd875, #ffb347);
    box-shadow: 0 0 12px rgba(255, 199, 105, 0.6);
}

.invite-welcome-count {
    margin: 0;
    color: rgba(232, 220, 250, 0.6);
    font-size: clamp(0.72rem, 2.1vw, 0.84rem);
    letter-spacing: 0.04em;
}

.invite-welcome-cta {
    margin-top: 18px;
}

/* The leaving state only fades the backdrop — the card itself is being flown
   into the quest rail by UI.RewardScene, and a competing opacity transition
   would make that flight look like a stutter. */
.invite-welcome-overlay--leaving {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
    transition: background 240ms ease;
}

/* ---------------------------------------------------------------------------
   LANDSCAPE PHONE — the page box, not the screen.

   starter-reward.css already turns the card sideways under `max-height: 520px`,
   but that grid was written for the grant's four rows and pins the mark to
   `span 5`. The brief carries seven, so it ran past the card's max-height,
   `overflow: auto` quietly absorbed it, and the CTA sat below a fold with
   nothing to indicate the card scrolled — unreachable on the exact surface a
   phone player arrives on. Everything the player must see or tap stays in view
   here; the redundant restatement of progress is what gives way.
   --------------------------------------------------------------------------- */
@media (max-height: 520px) {
    /* THREE columns, not the grant's two. A landscape phone is ~660–930px wide
       and under 300px tall, so the scarce axis is vertical and the CTA is the
       tallest single row. Moving it beside the text buys back its whole height
       plus its margins — enough that even the 667x275 page box fits without
       shrinking a touch target or dropping a line the player needs. */
    /* A landscape phone hands the page under 300px. The 16px breathing room
       the overlay keeps top and bottom is worth more as card height here than
       as margin, so both shrink together — the safe-area floor still wins
       wherever the notch actually intrudes. */
    .invite-welcome-overlay {
        padding-block:
            max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-bottom));
    }

    .invite-welcome-card {
        max-height: calc(100dvh - 16px);
        /* The card's 500px cap is a PORTRAIT measure. Holding it in landscape
           squeezed three columns into half the available width while the other
           half sat empty, so the amount wrapped and the composition went
           lopsided. A landscape phone has width to spare — spend it. */
        width: min(100%, 760px);
        align-content: center;
        /* `minmax(0, 1fr)` so the text column can actually claim the space the
           other two do not need. A bare `1fr` floors at max-content, which let
           the CTA's label take 216px of a 667px box and wrapped every line in
           the middle column until the card overflowed again. */
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 16px;
        padding: 14px 20px;
    }

    .invite-welcome-card .starter-reward-mark {
        /* All the rows, not the grant's five. */
        grid-column: 1;
        /* `span 5`, NOT `1 / -1`. In an implicit grid `-1` resolves to the last
           EXPLICIT line — line 1 here — so `1 / -1` silently collapses to a
           single row and pinned both the mark and the CTA to the top edge. */
        grid-row: 1 / span 5;
        align-self: center;
        /* A flat px width, matching the grant's landscape mark. A WIDTH must
           never be sized in a vertical unit — width and height would then
           disagree about which viewport they mean on a phone, and the square
           mark would stop being square (tests/unit/styles/viewportUnits). */
        width: 72px;
    }

    .invite-welcome-eyebrow,
    .invite-welcome-title,
    .invite-welcome-body,
    .invite-welcome-reward,
    .invite-welcome-progress {
        grid-column: 2;
    }

    .invite-welcome-cta {
        grid-column: 3;
        grid-row: 1 / span 5;
        align-self: center;
        justify-self: end;
        /* Capped and allowed to wrap: a long label in a language with longer
           words must cost the button two lines, never the text column its
           width. The height floor keeps it a real touch target. */
        min-width: 0;
        max-width: clamp(110px, 24vw, 190px);
        min-height: 44px;
        padding: 8px 14px;
        white-space: normal;
        line-height: 1.2;
        font-size: clamp(0.76rem, 2.6vh, 0.92rem);
    }

    .invite-welcome-eyebrow {
        font-size: clamp(0.6rem, 2.1vh, 0.72rem);
        letter-spacing: 0.14em;
    }

    .invite-welcome-title {
        font-size: clamp(1.05rem, 4.6vh, 1.5rem);
    }

    .invite-welcome-body {
        margin: 2px 0 0;
        font-size: clamp(0.76rem, 2.4vh, 0.9rem);
        line-height: 1.35;
    }

    /* The amount and its condition share a line instead of stacking. */
    .invite-welcome-reward {
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 8px;
        margin: 8px 0 6px;
    }

    .invite-welcome-reward-amount {
        font-size: clamp(1.15rem, 5vh, 1.6rem);
    }

    .invite-welcome-reward-condition {
        font-size: clamp(0.72rem, 2.3vh, 0.85rem);
    }

    .invite-welcome-progress {
        justify-content: flex-start;
        margin: 0 0 8px;
    }

    .invite-welcome-pip {
        /* Horizontal space is the plentiful axis in landscape, so the pips
           scale with the width they actually occupy. */
        width: clamp(22px, 4vw, 34px);
        height: 5px;
    }

    /* The pips ARE the count here; the sentence restating them is the one
       element that can go without costing the player information. */
    .invite-welcome-count {
        display: none;
    }

    .invite-welcome-cta {
        margin-top: 0;
    }
}

/* ===========================================================================
   THE PINNED INVITATION QUEST — where the brief lives after it is dismissed.

   Same row geometry as every other quest (it inherits `.lobby-quest-item`);
   only the accent marks it out as the special slot.
   =========================================================================== */
.lobby-quest-item--invite {
    border-color: rgba(196, 172, 255, 0.42);
    background:
        linear-gradient(135deg, rgba(126, 96, 214, 0.22), transparent 62%),
        rgba(22, 15, 38, 0.72);
}

.lobby-quest-item--invite .lobby-quest-bar-fill {
    background: linear-gradient(90deg, #b79bff, #ffd875);
}

.lobby-quest-item--invite .lobby-quest-progress {
    color: #d8c6ff;
}

.lobby-quest-invite-reward {
    grid-column: 1 / -1;
    color: #ffd875;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

@media (prefers-reduced-motion: reduce) {
    .invite-welcome-overlay--leaving {
        transition: none;
    }
}