/*
 * RoomPlay toast: a short, non-blocking message near the bottom of the screen (validation hints,
 * server errors, "link copied"). Driven by toast.js (window.RoomPlayToast.show) in plain-JS games
 * and by shared/client/toast.ts (showToast) in bundled games; both toggle .rp-toast.is-visible.
 *
 * Game Themes tune it through custom properties, set once on :root or [data-rp-game]:
 *   --rp-toast-bg, --rp-toast-color, --rp-toast-border, --rp-toast-radius, --rp-toast-shadow,
 *   --rp-toast-padding, --rp-toast-font-size, --rp-toast-font-weight, --rp-toast-bottom,
 *   --rp-toast-line-height, --rp-toast-max-width, --rp-toast-z.
 * Defaults: the theme's card colour (--bg-card) with black or white text picked from its lightness
 * (--text-primary is page text in most themes, so it is not paired with the card); browsers without
 * relative colours get dark ink on white. It sits above the bottom action bar so it does not hide
 * the button that was just pressed.
 */
.rp-toast {
    position: fixed;
    z-index: var(--rp-toast-z, 1100);
    left: 50%;
    /* --rp-toast-lift is set by toast.js/toast.ts to clear the buttons at the bottom of the screen. */
    bottom: var(--rp-toast-bottom, max(calc(112px + env(safe-area-inset-bottom, 0px)), var(--rp-toast-lift, 0px)));
    box-sizing: border-box;
    width: max-content;
    max-width: var(--rp-toast-max-width, min(calc(100vw - 32px), 480px));
    padding: var(--rp-toast-padding, 12px 18px);
    border: var(--rp-toast-border, 1px solid rgba(23, 25, 31, 0.12));
    border-radius: var(--rp-toast-radius, 16px);
    background: var(--rp-toast-bg, #ffffff);
    color: var(--rp-toast-color, #17191f);
    box-shadow: var(--rp-toast-shadow, 0 10px 30px rgba(0, 0, 0, 0.3));
    font-family: inherit;
    font-size: var(--rp-toast-font-size, 15px);
    font-weight: var(--rp-toast-font-weight, 600);
    line-height: var(--rp-toast-line-height, 1.25);
    text-align: center;
    overflow-wrap: anywhere;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

@supports (color: oklch(from white l c h)) {
    .rp-toast {
        background: var(--rp-toast-bg, var(--bg-card, #ffffff));
        color: var(--rp-toast-color, oklch(from var(--rp-toast-bg, var(--bg-card, #ffffff)) calc(1 - clamp(0, (l - 0.62) * 1000, 1) * 0.79) 0 0));
    }
}

.rp-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .rp-toast,
    .rp-toast.is-visible {
        transform: translate(-50%, 0);
        transition: opacity 0.15s linear, visibility 0s linear 0.15s;
    }
    .rp-toast.is-visible { transition: opacity 0.15s linear, visibility 0s; }
}