/* breeding.css: Starlight Nesting (forge parent picker, breeding preview, nest cards), hatch reveal and its modal, the generic form modal, the squad builder. */
/* ===== FORGE PARENT PICKER (UX6) ===== */
/* ===== CELESTIAL FORGE (breeding) ===== */
.forge-layout { display: flex; flex-direction: column; gap: 18px; }
.forge-cost-strip { margin-bottom: 18px; }
.forge-form { max-width: none; gap: 16px; }
.forge-hint-text { color: var(--text-secondary); font-size: 0.9rem; margin: 4px 0 0; }
.forge-catalyst { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--text-primary); }
.forge-catalyst input[type="checkbox"] { width: auto; margin: 0; flex-shrink: 0; }
.forge-catalyst__note { color: var(--text-muted); font-size: 0.85rem; font-weight: 400; }
.forge-swap-btn { align-self: flex-start; }

.parent-select-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 4px 0;
}
.parent-select-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 200px;
}
.parent-select-col .input { width: 100%; }
.parent-slot-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.parent-slot-mode-toggle { display: flex; gap: 4px; }
.parent-slot-mode-toggle .btn.is-active {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--bg-subtle);
}
.parent-select-media, .parent-select-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}
.parent-select-media img { width: 100%; height: 100%; object-fit: contain; }
.parent-select-empty { font-size: 1.6em; }
.parent-select-info { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 0.82rem; margin: 0; }
.parent-pick-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 10px 14px;
    background: var(--bg-cool);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Structured projection readout (replaces the old run-on parent-pick-hint) */
.forge-projected { margin: 2px 0; }
.forge-projected .breeding-preview-species-odds { font-size: 0.72em; }

/* Pre-submit confirmation + live cost total + affordability */
.forge-summary {
    padding: 12px 14px;
    background: var(--bg-cool);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.forge-summary__line { margin: 0; color: var(--text-primary); }
.forge-summary__total {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text-secondary);
}
.forge-summary__total .mono { color: var(--text-primary); font-weight: 700; }
.forge-summary__afford { margin: 2px 0 0; color: var(--color-error-text); font-weight: 600; }

.forge-submit-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* "Breed again" prefill-blocked notice: left-aligned card, not .empty-state
   (that's centered with 60px padding, made for a full empty picker, not a
   compact inline notice). */
.forge-prefill-notice {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}
.forge-prefill-notice__title { margin: 0; font-weight: 600; color: var(--text-primary); }
.forge-prefill-notice__reasons { margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 0.9rem; }
.forge-prefill-notice__reasons li { margin: 2px 0; }

/* Breeding queue + saved pairings panels */
.queue-list, .saved-pairing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.queue-item, .saved-pairing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--bg-cool);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.queue-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.queue-item__pets, .saved-pairing__pets { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.queue-item__cross, .saved-pairing__cross { color: var(--text-muted); font-weight: 400; }
.queue-item__status { font-size: 0.82rem; color: var(--text-muted); }
.queue-item__status--ready { color: var(--color-reward); font-weight: 600; }
.queue-item__actions, .saved-pairing__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ===== BREEDING PREVIEW PAGE ===== */
.breeding-preview-result { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.breeding-preview-commit { margin: 0; }
.breeding-preview-species-odds { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.7em; }
.breeding-preview-species-odds small { color: var(--text-muted); font-weight: 400; margin-left: 2px; }
.breeding-preview-markings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.preview-marking-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.breeding-preview-identity-row { display: flex; gap: 20px; flex-wrap: wrap; }
.breeding-preview-identity { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; }
.breeding-preview-identity-img {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    object-fit: contain;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
}
.breeding-preview-identity .parent-select-empty { width: 56px; height: 56px; font-size: 1.3em; }
.breeding-preview-identity-name { margin: 0; font-weight: 600; }
.breeding-preview-identity-meta { margin: 0; color: var(--text-secondary); font-size: 0.85em; }

.breeding-preview-actions-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

.breeding-preview-baby-roll { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.breeding-preview-baby { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.breeding-preview-baby img {
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    object-fit: contain;
}

/* Active-nest cards */
.nest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.nest-card { display: flex; flex-direction: column; gap: 10px; }
.nest-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.nest-card__title { margin: 0; font-size: 1.02rem; }
.nest-card__cross { color: var(--text-muted); font-weight: 400; }
.nest-card__timer { margin: 0; color: var(--text-secondary); }
.nest-card__timer .mono { color: var(--text-primary); font-weight: 700; }

/* Incubation progress bar (U7). The fill animates from its render-time % to
   100% over exactly the remaining seconds, so it advances smoothly with no JS
   and needs no tick updates: the card re-renders on the next list refresh. */
.nest-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-subtle, var(--bg-cool));
    overflow: hidden;
}
.nest-progress__fill {
    height: 100%;
    width: var(--start-pct, 0%);
    border-radius: inherit;
    background: var(--color-reward);
    animation-name: nest-incubate;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.nest-progress__fill--done { width: 100%; animation: none; }
@keyframes nest-incubate {
    from { width: var(--start-pct, 0%); }
    to   { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .nest-progress__fill { animation: none; width: var(--start-pct, 0%); }
}

.forge-picker-filter { max-width: 340px; }
.nest-card__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.nest-card__actions form { max-width: none; margin: 0; }
/* Once a nest is ready, Hatch is the button a player wants; Cancel destroys the whole
   nest, so it shrinks and moves to the far side rather than sitting the same size and
   right next to Hatch where a mis-click is easy. */
.nest-card__cancel-form { margin-left: auto; }

/* Light inline empty message used inside panels */
.empty-inline { color: var(--text-secondary); text-align: center; padding: 24px 12px; margin: 0; }

/* ===== HATCH REVEAL (UX4) ===== */
.hatch-reveal {
    text-align: center;
    padding: 28px 24px;
    background: var(--bg-surface);
    border: 1px solid color-mix(in srgb, var(--color-reward) 45%, var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--glow-reward), var(--shadow-lg);
    animation: hatch-pop 0.6s ease-out;
}
.hatch-reveal .eyebrow { color: var(--color-reward); }
.hatch-reveal-title { margin: 6px 0 4px; font-family: var(--font-display); }
.hatch-reveal-image {
    display: inline-block;
    margin: 8px auto;
}
.hatch-reveal-stats { color: var(--text-secondary); }
.hatch-reveal-stats .mono { color: var(--text-primary); }
/* The hatch's one genuinely variable roll. A standout says "exceptional" in words: the
   border and colour only tint what the text already states. */
.hatch-reveal-potential { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 6px 0 0; }
.potential-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px;
    border: 1px solid var(--border-subtle);
    font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-secondary);
}
.potential-chip--standout { border-color: var(--color-reward); color: var(--color-reward); }
.hatch-reveal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.hatch-reveal-twins {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.hatch-reveal-twins .hatch-reveal-baby {
    flex: 1 1 220px;
    max-width: 300px;
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.hatch-reveal-baby { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.collect-all-reveal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    text-align: left;
}
.collect-all-reveal-entry {
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.collect-all-reveal-entry__node { margin: 0; font-weight: 700; }
.hatch-reveal-baby .btn-reward { margin-top: 8px; }
.hatch-mutation-callout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-weight: 600;
    animation: hatch-pop 0.6s ease-out 0.25s backwards;
}
@keyframes hatch-pop {
    0%   { opacity: 0; transform: scale(0.6); }
    70%  { transform: scale(1.04); }
    100% { opacity: 1; transform: scale(1); }
}
/* A limited-breed hatch (pets.Pet.LIMITED_BREED_SPECIES) gets its own tier above the
   callouts above: this is orders of magnitude rarer than a standout ceiling roll or a
   mutation, and sitting it in the same .hatch-mutation-callout list would read as "one
   more common roll." The whole card gets a border/glow, and the banner leads every
   other callout rather than being appended after them. Reduced-motion is handled by
   the existing global body.reduced-motion and prefers-reduced-motion rules (they clamp
   any animation-duration to ~0 via a wildcard selector), so no extra override is needed
   here. */
.hatch-reveal-baby--legendary {
    border: 2px solid var(--color-reward);
    border-radius: var(--radius-md);
    padding: 10px;
    box-shadow: 0 0 0 1px var(--color-reward), 0 0 18px -4px var(--color-reward);
}
.hatch-legendary-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-reward);
    background: color-mix(in srgb, var(--color-reward) 16%, transparent);
    animation: hatch-legendary-glow 2.4s ease-in-out infinite, hatch-pop 0.6s ease-out 0.15s backwards;
}
.hatch-legendary-banner-glyph { font-size: 1.8rem; line-height: 1; }
.hatch-legendary-banner-text { text-align: left; font-size: 0.9rem; color: var(--text-primary); }
.hatch-legendary-banner-text strong { display: block; font-size: 1.08rem; color: var(--color-reward); }
@keyframes hatch-legendary-glow {
    0%, 100% { box-shadow: 0 0 0 1px var(--color-reward), 0 0 10px -2px var(--color-reward); }
    50%      { box-shadow: 0 0 0 1px var(--color-reward), 0 0 22px 2px var(--color-reward); }
}

/* ===== HATCH REVEAL MODAL ===== */
/* Prominent celebratory overlay (below toasts at 9999 so a confirmation toast
   still floats over it). The card reuses the .hatch-reveal look. */
.hatch-modal {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.hatch-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-overlay);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.hatch-modal__card {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    /* dvh: at 100vh this card extended under the phone's browser chrome, putting its
       own bottom controls out of reach on the payoff moment of the breeding loop. */
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    /* Backup for .hatch-modal__sparkles: nothing inside may add a sideways scrollbar. */
    overflow-x: hidden;
    /* Stop scroll chaining: without this, scrolling past the end of a tall reveal hands
       the gesture to the page behind it. body.modal-open covers the desktop case; this
       is the half that matters on touch, where the fling keeps going. */
    overscroll-behavior: contain;
    text-align: center;
    padding: 28px 24px;
    background: var(--bg-surface);
    border: 1px solid color-mix(in srgb, var(--color-reward) 55%, var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--glow-reward), var(--shadow-lg);
    animation: hatch-pop 0.55s ease-out;
}
.hatch-modal__card .eyebrow { color: var(--color-reward); }
.hatch-modal__sparkles {
    font-size: 2.4rem;
    line-height: 1;
    /* fit-content: as a full-width block, the 1.18 scale keyframe made this box wider
       than the card, so the card's overflow (auto on both axes once overflow-y is set)
       toggled a horizontal scrollbar every cycle and bounced everything by its height. */
    width: fit-content;
    margin: 0 auto 4px;
    animation: hatch-sparkle 1.6s ease-in-out infinite;
}
@keyframes hatch-sparkle {
    0%, 100% { opacity: 0.55; transform: scale(1) rotate(-4deg); }
    50%      { opacity: 1;    transform: scale(1.18) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hatch-modal__card { animation: none; }
    .hatch-modal__sparkles { animation: none; }
}

/* Generic centered content modal for a form: unlike .hatch-modal's ceremonial reveal
   styling (celebratory, text-centered, sparkles), this is a plain dialog shell. The
   squad-creation picker is the first user; nothing here is squad-specific. */
.form-modal {
    position: fixed;
    inset: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.form-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--modal-overlay);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.form-modal__card {
    position: relative;
    z-index: 1;
    width: min(900px, 100%);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    /* Same reason as .hatch-modal__card: a fling past the end of a tall picker must not
       scroll the page behind the modal. */
    overscroll-behavior: contain;
    padding: 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.form-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.form-modal__head h2 { margin: 0; font-size: 1.15rem; }
.form-modal__head .eyebrow { display: block; margin-bottom: 3px; }
.form-modal__intro { margin: 5px 0 0; max-width: 52ch; color: var(--text-secondary); font-size: 0.84rem; line-height: 1.45; }
.form-modal__close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 8px;
    border-radius: var(--radius-md);
    min-width: 44px;
    min-height: 44px;
}
@media (hover: hover) { .form-modal__close:hover { background: var(--bg-hover); color: var(--text-primary); } }
.form-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* Squad builder: the picker and preview share one surface on desktop, then become a
   single full-height flow on phones. The picker rows must explicitly restore a row
   direction because the shared `label` rule makes every label a vertical form field. */
/* No min-height: 0 here: that would let the flex/grid chain squeeze this box (and
   .squad-builder below it) shorter than its own content needs. With align-items: start,
   a shrunk grid track does not shrink its items to match: .squad-builder__picker's roster
   just kept its natural height and painted past the (too-short) box, over the Cancel/
   Create Squad buttons beneath it. Leaving these at their default min-height: auto keeps
   the box (and .form-modal__card's own overflow-y: auto above it) honest about how tall
   the content actually is, so a long roster scrolls the whole card instead of overlapping
   the action row. Mobile's own copies of these rules (below) are unaffected: they run in
   a different, intentionally-squeezed full-height layout and re-declare min-height: 0
   themselves. */
.squad-create-form { display: flex; flex-direction: column; gap: 14px; }
.squad-name-field { gap: 6px; }
.squad-builder { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.75fr); gap: 16px; align-items: start; }
.squad-builder__picker,
.squad-builder__preview { min-width: 0; }
.squad-picker-section { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.squad-picker-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.squad-picker-section__title { margin: 0; font-size: 1rem; }
.squad-picker-section__hint { margin: 3px 0 0; color: var(--text-secondary); font-size: 0.82rem; }
.squad-picker-count { flex: 0 0 auto; padding-top: 3px; color: var(--text-muted); font-size: 0.76rem; white-space: nowrap; }
.squad-search { position: relative; }
.squad-search .input { width: 100%; margin: 0; padding-right: 42px; }
.squad-search__clear {
    position: absolute;
    top: 50%;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    transform: translateY(-50%);
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
@media (hover: hover) { .squad-search__clear:hover { color: var(--text-primary); background: var(--bg-hover); } }
.squad-picker-empty { margin: 0; padding: 10px 12px; color: var(--text-secondary); background: var(--bg-subtle); border-radius: var(--radius-sm); }
.squad-builder__picker .squad-roster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    /* Rows size to their own card and pack from the top: a stretched or squeezed track
       let the wrapped pill rows paint past the card border into the next row. */
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    max-height: min(440px, 52dvh);
    margin-top: 0;
    padding: 8px;
}
/* Name on its own line, pills stacked beneath it: a half-width card has no room for
   name + pills side by side, and the wrapping flex version was what bulged. */
.squad-builder .squad-pet-pick { align-items: flex-start; height: auto; min-height: 0; padding: 8px 34px 8px 8px; gap: 8px; border-width: 1px; }
.squad-builder .squad-pet-pick:has(input:disabled) { opacity: 0.72; background: var(--bg-subtle); }
.squad-builder .squad-pet-pick__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.squad-builder .squad-pet-pick__name { min-width: 0; font-size: 0.9rem; line-height: 1.25; }
.squad-builder .squad-pet-pick__meta { gap: 4px; min-width: 0; }
.squad-builder .squad-pet-pick__meta > * { max-width: 100%; }
.squad-builder .squad-pet-pick__check { right: 8px; }
.squad-builder__preview {
    position: sticky;
    top: 0;
    padding: 16px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}
.squad-builder__preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.squad-builder__preview-head h3 { margin: 0; font-size: 1.05rem; }
.squad-builder__preview-head .eyebrow { display: block; margin-bottom: 3px; }
.squad-builder__count { color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }
.squad-selected-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.squad-selected-empty { width: 100%; margin: 0; padding: 10px 12px; color: var(--text-secondary); background: var(--bg-surface); border: 1px dashed var(--border-color); border-radius: var(--radius-sm); font-size: 0.82rem; }
.squad-selected-member { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; padding: 7px 8px 7px 10px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.squad-selected-member__thumb { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.squad-selected-member__thumb--pending { display: flex; align-items: center; justify-content: center; font-size: 0.8rem; background: var(--bg-subtle); }
.squad-selected-member__identity { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 1px; }
.squad-selected-member__identity strong { overflow: hidden; color: var(--text-primary); font-size: 0.84rem; text-overflow: ellipsis; white-space: nowrap; }
.squad-selected-member__identity span { color: var(--text-muted); font-size: 0.72rem; }
.squad-selected-member__remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; color: var(--text-muted); background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; }
@media (hover: hover) { .squad-selected-member__remove:hover { color: var(--color-error-text); background: var(--color-error-bg); } }
.squad-preview-dice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 14px; }
.squad-preview-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; padding: 7px 8px; background: var(--bg-surface); border-left: 3px solid var(--border-subtle); border-radius: var(--radius-sm); }
.squad-preview-stat span { color: var(--text-secondary); font-size: 0.75rem; }
.squad-preview-stat strong { font-family: var(--font-mono); font-size: 0.95rem; }
.squad-preview-stat small { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.66rem; }
.squad-preview-stat--red { border-left-color: var(--dice-red); }
.squad-preview-stat--green { border-left-color: var(--dice-green); }
.squad-preview-stat--blue { border-left-color: var(--dice-blue); }
.squad-preview-stat--gold { border-left-color: var(--dice-gold); }
.squad-preview-total { margin: 10px 0 0; color: var(--text-secondary); font-size: 0.82rem; text-align: right; }
.squad-preview-total strong { color: var(--text-primary); font-family: var(--font-mono); }
.squad-preview-traits { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.squad-preview-traits > .eyebrow { display: block; margin-bottom: 6px; }
.squad-preview-traits__list { display: flex; flex-wrap: wrap; gap: 5px; }

@media (width < 768px) {
    .form-modal { align-items: stretch; padding: 0; }
    .form-modal__card { width: 100%; min-height: 100vh; min-height: 100dvh; max-height: 100vh; max-height: 100dvh; padding: max(16px, env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px)); overflow: hidden; border-radius: 0; gap: 12px; }
    .form-modal__head { gap: 8px; }
    .form-modal__head h2 { font-size: 1.08rem; }
    .form-modal__intro { max-width: 34ch; font-size: 0.8rem; }
    .squad-create-form { flex: 1; min-height: 0; gap: 10px; }
    .squad-builder { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: 10px; overflow: hidden; }
    .squad-builder__preview { position: static; flex: 0 0 auto; padding: 10px 12px; }
    .squad-builder__picker { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; }
    .squad-picker-section { height: 100%; }
    .squad-picker-section__head { gap: 8px; }
    .squad-picker-section__hint { font-size: 0.78rem; }
    .squad-builder__picker .squad-roster { display: flex; flex: 1; flex-direction: column; min-height: 0; max-height: none; padding: 6px; gap: 6px; overflow-y: auto; }
    .squad-builder .squad-pet-pick { min-height: 56px; }
    .squad-selected-list { margin-top: 8px; gap: 5px; }
    .squad-selected-member { flex: 1 1 120px; padding-block: 5px; }
    .squad-preview-dice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
    .squad-preview-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 3px; border-left: 0; border-top: 2px solid var(--border-subtle); text-align: center; }
    .squad-preview-stat strong { order: -1; font-size: 0.9rem; }
    .squad-preview-stat small { display: none; }
    .squad-preview-stat--red { border-top-color: var(--dice-red); }
    .squad-preview-stat--green { border-top-color: var(--dice-green); }
    .squad-preview-stat--blue { border-top-color: var(--dice-blue); }
    .squad-preview-stat--gold { border-top-color: var(--dice-gold); }
    .squad-preview-total { margin-top: 5px; }
    .squad-preview-traits { display: none; }
    .form-modal__actions { flex: 0 0 auto; margin-top: 0; padding-top: 10px; border-top: 1px solid var(--border-subtle); }
    .form-modal__actions .btn { flex: 1; min-height: 46px; }
}

@media (max-width: 380px) {
    .form-modal__card { padding-inline: 12px; }
    .squad-builder__preview { padding-inline: 10px; }
    .squad-picker-count { font-size: 0.7rem; }
    .squad-builder .squad-pet-pick { padding-inline: 8px 34px; }
    .squad-pet-pick__meta { gap: 3px 4px; }
}