/*
 * Deceit 2 — Twitch Drops account link.
 *
 * Palette and type come from deceit.gg: Lora (uppercase, letter-spaced) for display,
 * Montserrat for UI, pale lilac #e0d5e2 on a smoky purple-charcoal texture. Magenta
 * #ff5dff is a spot accent there, so it stays one here. Everything is square-cornered
 * with thin double-line "etched" frames — the site has no fills, glows, or rounding.
 * Twitch purple is the one borrowed colour — players need to recognise whose account
 * they are about to sign in to.
 */

:root {
    --void: #0b0910;          /* near-black, violet-cast */
    --surface: #17131f;
    --edge: #2b2338;
    --text: #e0d5e2;          /* deceit.gg pale lilac */
    --heading: #f5e9f7;       /* deceit.gg heading off-white */
    --muted: #8d829a;
    --deceit: #ff5dff;        /* deceit.gg magenta */
    --twitch: #9146ff;
    --twitch-hover: #a970ff;
    --joined: #c451ff;        /* the midpoint where the two brands meet */
    --danger: #d44848;        /* deceit.gg red */
    --frame: rgba(224, 213, 226, 0.5);   /* etched-frame inner line */
    --frame-faint: rgba(224, 213, 226, 0.22); /* etched-frame outer line */

    --display: "Lora", Georgia, "Times New Roman", serif;

    --plate-w: 13.5rem;
}

* { box-sizing: border-box; }

/* deceit.gg sits on a smoky purple-charcoal texture; approximated here with layered
   gradients plus a self-contained SVG grain so nothing is hotlinked. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
        radial-gradient(80rem 40rem at 50% -20%, #1d1430 0%, transparent 60%),
        radial-gradient(50rem 35rem at 15% 85%, #171024 0%, transparent 65%),
        radial-gradient(45rem 30rem at 88% 30%, #150f20 0%, transparent 60%),
        var(--void);
    color: var(--text);
    font-family: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.shell {
    width: 100%;
    max-width: 41rem;
    text-align: center;
}

/* ---------- Header ---------- */

/* The Deceit mark: white artwork on transparency, so it needs no treatment on this background. */
.mark {
    display: block;
    width: 4.5rem;
    height: auto;
    margin: 0 auto 1.5rem;
}

.eyebrow {
    margin: 0 0 0.85rem;
    font-family: var(--display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--deceit);
}

/* deceit.gg display style: Lora, bold, uppercase, wide-tracked, heading off-white. */
.title {
    margin: 0 0 0.9rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--heading);
}

.lede {
    margin: 0 auto 2.75rem;
    max-width: 31rem;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ---------- The pairing ---------- */

.pair {
    display: flex;
    align-items: stretch;
    justify-content: center;
    margin-bottom: 2.5rem;
}

/* Square plates with the site's double-line etched frame: a 1px border plus a fainter
   inner line drawn by an inset box-shadow. */
.plate {
    flex: 0 0 var(--plate-w);
    padding: 1.4rem 1rem;
    background: var(--surface);
    border: 1px solid var(--frame);
    box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 4px var(--frame-faint);
    text-align: left;
}

.plate__brand {
    margin: 0 0 0.4rem;
    font-family: var(--display);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plate--deceit .plate__brand { color: var(--deceit); }
.plate--twitch .plate__brand { color: var(--twitch); }

.plate__value {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.plate__value--pending {
    color: var(--muted);
    font-weight: 400;
}

/* Which store account this is — the disambiguator for players who own the game twice. */
.plate__meta {
    display: inline-block;
    margin: 0.55rem 0 0;
    padding: 0.2rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--edge);
}

/* The chain reads as incomplete until the accounts are actually joined. */

.chain {
    display: flex;
    align-items: center;
    flex: 1 1 2rem;
    min-width: 2.5rem;
}

.chain__line {
    flex: 1;
    height: 2px;
    background: var(--edge);
}

.chain__line--from { background: linear-gradient(90deg, var(--deceit), var(--edge)); }

.chain__node {
    width: 0.72rem;
    height: 0.72rem;
    margin: 0 0.3rem;
    flex: none;
    background: var(--void);
    border: 2px solid var(--edge);
    transform: rotate(45deg);
    transition: background 0.4s ease, border-color 0.4s ease;
}

.pair--linked .chain__line--from { background: linear-gradient(90deg, var(--deceit), var(--joined)); }
.pair--linked .chain__line--to { background: linear-gradient(90deg, var(--joined), var(--twitch)); }
.pair--linked .chain__node {
    background: var(--joined);
    border-color: var(--joined);
    animation: seal 0.5s ease-out;
}

@keyframes seal {
    from { transform: rotate(45deg) scale(0.4); opacity: 0; }
    to   { transform: rotate(45deg) scale(1); opacity: 1; }
}

/* ---------- Action ---------- */

/* deceit.gg buttons: square plates, uppercase serif, a thin frame with a second fainter
   line just outside (drawn with ::after so it survives any background). The Twitch
   connect button keeps its solid purple fill — recognition beats consistency there. */
.button {
    position: relative;
    width: 100%;
    max-width: 21rem;
    padding: 0.95rem 1.5rem;
    font-family: var(--display);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--twitch);
    border: 1px solid var(--twitch-hover);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.button::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(169, 112, 255, 0.35);
    pointer-events: none;
}

.button:hover:not(:disabled) { background: var(--twitch-hover); }
.button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled { opacity: 0.4; cursor: not-allowed; }

.button:focus-visible {
    outline: 2px solid var(--deceit);
    outline-offset: 7px;
}

.fineprint {
    margin: 1.1rem auto 0;
    max-width: 26rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--muted);
}

.link {
    color: var(--muted);
    text-decoration: underline;
}

.link:hover { color: var(--text); }

/* ---------- Footer ---------- */

.footer {
    margin-top: 3rem;
    font-size: 0.8rem;
    color: var(--muted);
}

.footer__sep { margin: 0 0.6rem; opacity: 0.5; }

/* ---------- Platform sign-in ---------- */

.providers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Near-black etched plates like deceit.gg's platform row, but each frame keeps its
   platform's brand colour so the button is recognisable at a glance. */
.button--provider {
    background: #0e0b14;
    border: 1px solid var(--frame);
    color: var(--text);
}
.button--provider::after { border-color: var(--frame-faint); }
.button--provider:hover:not(:disabled) { background: #1a1424; }

.button--steam { border-color: #66c0f4; }
.button--steam::after { border-color: rgba(102, 192, 244, 0.35); }

.button--xbox { border-color: #107c10; }
.button--xbox::after { border-color: rgba(16, 124, 16, 0.45); }

.button--playstation { border-color: #0070d1; }
.button--playstation::after { border-color: rgba(0, 112, 209, 0.45); }

/* ---------- Outcome ---------- */

.outcome__message {
    margin: 0 auto;
    max-width: 30rem;
    font-size: 1rem;
    line-height: 1.6;
}

.outcome__hint {
    margin: 0.9rem auto 0;
    max-width: 30rem;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--muted);
}

.outcome--error .outcome__message { color: var(--danger); }

.hidden { display: none; }

/* ---------- Small screens: stack, and turn the chain vertical ---------- */

@media (max-width: 34rem) {
    .pair { flex-direction: column; align-items: stretch; }
    .plate { flex: none; }
    .chain { flex-direction: column; min-height: 2.75rem; align-self: center; }
    .chain__line { width: 2px; height: auto; flex: 1; }
    .chain__line--from { background: linear-gradient(180deg, var(--deceit), var(--edge)); }
    .chain__node { margin: 0.3rem 0; }
    .pair--linked .chain__line--from { background: linear-gradient(180deg, var(--deceit), var(--joined)); }
    .pair--linked .chain__line--to { background: linear-gradient(180deg, var(--joined), var(--twitch)); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* Drops already delivered to this account. Only rendered when there is at least one. */
.drops {
    margin-top: 2rem;
    text-align: left;
}

.drops__heading {
    font-family: var(--display);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--heading);
    opacity: 0.8;
    margin-bottom: 0.75rem;
}

.drops__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.drops__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.drops__name {
    font-weight: 600;
}

/* Secondary to the reward itself — the date answers "when", not "what". */
.drops__when {
    font-size: 0.8rem;
    opacity: 0.6;
    white-space: nowrap;
}