@property --ghost-blush { syntax: "<number>"; inherits: true; initial-value: 0; }
.ghost-buddy, .ghost-trail, .ghost-rest { display: none; }
@media (min-width: 1100px) and (min-height: 600px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .ghost-buddy {
        display: block; position: absolute; left: 0; top: 0; width: 139px; height: 157px;
        padding: 0; border: 0; background: none; z-index: 90; cursor: pointer;
        perspective: 220px; will-change: transform;
    }
    .ghost-sprite { display: block; position: relative; width: 100%; height: 100%;
        filter: drop-shadow(0 0 6px #a9efffb3) drop-shadow(0 0 var(--ghost-glow, 18px) #75dfff80);
        transition: --ghost-blush 650ms ease-in-out;
    }
    .ghost-sprite img { display: block; width: 100%; height: 100%; object-fit: contain; }
    .ghost-sprite .ghost-blush { position: absolute; inset: 0; opacity: var(--ghost-blush);
        filter: grayscale(1) sepia(1) saturate(3.5) hue-rotate(-85deg);
    }
    .ghost-buddy.is-petted .ghost-sprite { --ghost-blush: 1; }
    .ghost-buddy[data-mode="hiding"] .ghost-sprite { filter: drop-shadow(0 0 3px #a9efff55); }
    .ghost-buddy.is-disabling .ghost-sprite { filter: grayscale(.65) brightness(.88) drop-shadow(0 5px 10px #75dfff25); }
    .ghost-trail {
        display: block; position: absolute; left: 0; top: 0; width: 139px; height: 157px;
        pointer-events: none; z-index: 89; opacity: 0; perspective: 220px;
    }
    .ghost-rest {
        display: flex; align-items: center; gap: 8px;
        position: fixed; right: 12px; bottom: 10px; z-index: 91;
        padding: 8px 15px 8px 9px; border: 1px solid var(--accent); border-radius: 20px;
        background: var(--surface); color: var(--text);
        font: inherit; font-size: 13px; cursor: pointer;
        box-shadow: 0 3px 18px #0004;
        transform-origin: bottom right;
    }
    .ghost-rest { transition: padding 240ms ease, gap 240ms ease; }
    .ghost-rest:hover, .ghost-rest:focus-visible {
        border-color: var(--accent); filter: brightness(1.15);
        box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
    }
    .ghost-rest:active { filter: brightness(.95); }
    .ghost-rest { z-index: 1101; }
    .ghost-rest.is-prominent { padding: 14px 23px 14px 15px; gap: 12px; }
    .ghost-rest.is-prominent .ghost-invite-mark { width: 40px; height: 44px; }
    .ghost-invite-mark { transition: width 240ms ease, height 240ms ease; }
    .ghost-rest.is-inviting { animation: ghost-invitation-pulse 2s ease-in-out 5; }
    @keyframes ghost-invitation-pulse {
        0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 25%, transparent); }
        50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 30px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 55px color-mix(in srgb, var(--accent) 30%, transparent); }
    }
    .ghost-invite-mark { width: 30px; height: 34px; object-fit: contain; }
    .ghost-rest[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--background); }
    .ghost-rest[aria-pressed="false"]:not(.is-invitation) { background: var(--surface); border-color: var(--line-bright); color: var(--muted); }
    .ghost-buddy[hidden], .ghost-trail[hidden], .ghost-rest[hidden] { display: none; }
}

/* Short, opt-in starlight accents. They never intercept page input. */
.ghost-spark { position: fixed; z-index: 89; pointer-events: none; line-height: 1; text-shadow: 0 0 7px currentColor; }
@media (prefers-reduced-motion: reduce), (max-width: 1099px) { .ghost-spark { display: none; } }