/* Photo reminder modal
   =================================================================
   The nudge that asks for a picture, mid-battle.

   These rules used to live in `static/hh/css/screens/settings.css`,
   which the shell DOES NOT LINK - it links the `bb` copy of that
   filename, and the two are different files. So every class below was
   styled and none of it painted: the modal would have rendered as
   unstyled text on a bare overlay, which looks like a broken app
   rather than a missing stylesheet.

   It lives here, beside `static/bb/js/photo-reminder.js`, because the
   feature is framework - the cadence is a shared setting and The Old
   World gets the same nudge the day it grows photo capture. Keeping
   the sheet next to the module it paints is also the cheapest way to
   notice if one of them ever moves without the other.

   `slideUp` is redeclared here rather than borrowed. The existing
   keyframe of that name is defined in two `hh` sheets, and depending
   on one of those would reintroduce exactly the unlinked-sheet problem
   this file exists to escape - silently, because a missing animation
   does not look like an error.
   ================================================================= */

@keyframes bbPhotoReminderIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.photo-alert-overlay {
    z-index: 250;
}

.photo-alert-modal {
    background: var(--bg-root);
    border: 1px solid var(--gold);
    border-radius: 12px;
    padding: var(--space-5);
    max-width: 320px;
    width: 85%;
    text-align: center;
    animation: bbPhotoReminderIn 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .photo-alert-modal { animation: none; }
}

.photo-alert-icon {
    color: var(--gold);
    margin-bottom: var(--space-3);
}

.photo-alert-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.photo-alert-body {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.photo-alert-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.photo-alert-btn {
    width: 100%;
    /* 48px: the tap-target floor the phone audit holds every control to. */
    min-height: 48px;
    font-size: 0.9rem;
}

.photo-alert-hint {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: var(--space-3);
}