/* ═══════════════════════════════════════
   Всплывающее приглашение в бой
   ═══════════════════════════════════════ */

/*
 * Живёт на каждой странице игрока, поэтому позиционируется фиксированно и не
 * зависит от вёрстки той страницы, поверх которой всплыло. z-index выше
 * навбара: приглашение не имеет права уехать под него. Вид — .paper-card,
 * появление — .ink-enter (классы ставит invite.js).
 */
.invite-toast {
    position: fixed;
    right: var(--space-lg);
    bottom: var(--space-lg);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 340px;
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg);
}

.invite-toast__text {
    font-size: var(--font-md);
    line-height: 1.5;
}

.invite-toast__actions {
    display: flex;
    gap: var(--space-sm);
}

.invite-toast__btn {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-sm);
    text-align: center;
    text-decoration: none;
}

/* На мобильных — во всю ширину с отступами: 340px там уже не помещаются. */
@media (max-width: 600px) {
    .invite-toast {
        right: var(--space-md);
        left: var(--space-md);
        max-width: none;
    }
}

/* Тост фиксирован у нижнего края и с z-index 1100 лёг бы поверх нижних
   вкладок — встаёт над ними. */
@media (max-width: 900px) {
    body.has-tabbar .invite-toast {
        bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom) + var(--space-lg));
    }
}