/* Shared required-field hint (shared/client/required-field.ts).
   Error colour follows the RoomPlay semantic token, never the game theme. */
.rp-required-error {
    border-color: var(--rp-error, #f87171) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-error, #f87171) 28%, transparent);
    animation: rp-required-shake 420ms ease-out;
}

.rp-required-hint {
    grid-column: 1 / -1;
    margin: 6px 2px 0;
    color: var(--rp-error, #f87171);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    animation: rp-required-hint-in 200ms ease-out;
}

@keyframes rp-required-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(2px); }
}

@keyframes rp-required-hint-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rp-required-error, .rp-required-hint { animation: none; }
}