/* Empty and locked states (Disciple Missions, Guardian, item pickers, Breeding parents, Primordial Crucible).
   Markup: InfoKit.empty() plus the feature-specific pieces below. */
.sh-empty--ico { --c: var(--ui-gold, #ffd700); gap: 8px; padding: 32px 16px; }
.sh-empty--ico::before { display: none; }
.sh-empty .sh-empty__icon {
    display: grid; place-items: center;
    width: 56px; height: 56px; margin-bottom: 4px;
    border-radius: 50%;
    opacity: 1; font-size: inherit;
    color: var(--c);
    background: color-mix(in srgb, var(--c) 12%, rgba(0, 0, 0, 0.3));
    border: 1px dashed color-mix(in srgb, var(--c) 55%, transparent);
}
.sh-empty__icon svg { width: 28px; height: 28px; }
.sh-empty--fill { flex: 1; justify-content: center; min-height: 300px; }

/* Item picker empty (also used by World Overseers and recipe pickers) */
.item-picker-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.item-picker-empty__icon {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
    color: var(--ui-gold, #ffd700);
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed color-mix(in srgb, var(--ui-gold, #ffd700) 50%, transparent);
}
.item-picker-empty__icon svg { width: 24px; height: 24px; }

/* Primordial Crucible: locked state (art panel on the left, requirements on the right) */
.pcl {
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 36px; align-items: center;
    max-width: 920px; margin: 28px auto; padding: 28px;
    border-radius: var(--r-lg, 12px);
    border: 1px solid rgba(255, 160, 60, 0.28);
    background: radial-gradient(ellipse at 25% 40%, rgba(255, 140, 40, 0.14), transparent 60%), rgba(0, 0, 0, 0.2);
}
.pcl__stage {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; max-width: 340px; margin: 0 auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 170, 70, 0.4);
    background:
        radial-gradient(circle at 50% 58%, rgba(255, 150, 50, 0.38) 0%, rgba(255, 110, 30, 0.1) 45%, transparent 70%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(60, 20, 8, 0.45));
    overflow: hidden;
    animation: pcl-pulse 3.2s ease-in-out infinite;
}
.pcl__stage::before { content: ""; position: absolute; inset: 14px; border-radius: 12px; border: 1px dashed rgba(255, 170, 70, 0.3); pointer-events: none; }
.pcl__stage::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 14%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%); }
.pcl__art { position: relative; z-index: 1; width: 84%; max-width: 290px; }
.pcl__art img { display: block; width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 20px rgba(255, 140, 40, 0.55)); }
@keyframes pcl-pulse { 0%, 100% { box-shadow: 0 0 18px rgba(255, 140, 40, 0.16); } 50% { box-shadow: 0 0 40px rgba(255, 140, 40, 0.36); } }
@media (prefers-reduced-motion: reduce) { .pcl__stage { animation: none; } }
.pcl__info { display: flex; flex-direction: column; gap: 12px; min-width: 0; text-align: left; }
.pcl__title { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.4px; color: var(--p-ffb347, #ffb347); }
.pcl__text { margin: 0 0 6px; font-size: 0.92rem; line-height: 1.5; color: var(--ui-text-dim, #c9b98a); }
.pcl__reqs { display: flex; flex-direction: column; gap: 10px; }
.pcl__req {
    --c: #ffb347;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art name" "art val" "bar bar";
    column-gap: 12px; row-gap: 2px; align-items: center; text-align: left;
    padding: 12px 14px; border-radius: var(--r-md, 8px);
    border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
    background: color-mix(in srgb, var(--c) 9%, rgba(0, 0, 0, 0.3));
}
.pcl__req.is-ok { border-color: var(--p-4ade80, #4ade80); }
.pcl__req-art { grid-area: art; width: 52px; height: 52px; display: grid; place-items: center; }
.pcl__req-art svg, .pcl__req-art img { width: 52px; height: 52px; }
.pcl__req-name { grid-area: name; align-self: end; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--c); }
.pcl__req-val { grid-area: val; align-self: start; font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--p-f87171, #f87171); }
.pcl__req.is-ok .pcl__req-val { color: var(--p-4ade80, #4ade80); }
.pcl__req-val small { font-size: 0.8rem; font-weight: 600; color: var(--ui-text-dim, #b8c6c4); }
.pcl__req-bar { grid-area: bar; margin-top: 10px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.09); overflow: hidden; }
.pcl__req-bar > span { display: block; height: 100%; background: var(--c); }
.pcl .pcl__cta {
    width: 100%; min-height: 50px; margin-top: 6px;
    font-size: 1rem; font-weight: 800; letter-spacing: 0.4px; color: #fff4e6;
    background: linear-gradient(135deg, #c0261a, #ff8a1e);
    border: 1px solid #ff6b4a; border-radius: var(--r-md, 8px);
    box-shadow: 0 0 16px rgba(255, 120, 40, 0.3);
}
.pcl .pcl__cta:disabled { opacity: 0.5; filter: saturate(0.6); box-shadow: none; cursor: not-allowed; }
@media (max-width: 760px) { .pcl { grid-template-columns: 1fr; gap: 20px; padding: 18px 14px; } .pcl__stage { max-width: 240px; } .pcl__info { text-align: center; } }

/* Breeding parent slot without a beast */
.db-breed-art--empty { width: 80px; height: 80px; border-radius: 50%; color: var(--ui-gold, #dcc28d); border: 1px dashed color-mix(in srgb, var(--ui-gold, #dcc28d) 55%, transparent); background: rgba(0, 0, 0, 0.25); }
.db-breed-art--empty svg { width: 34px; height: 34px; }
#db-breeding-content .db-breed-parent--empty { border-top-style: dashed; }
#db-breeding-content .db-breed-parent--empty .db-breed-identity { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
#db-breeding-content .db-breed-parent--empty .db-breed-select { flex: none; text-align: center; color: var(--ui-gold, #dcc28d); }
#db-breeding-content .db-breed-parent--empty .db-breed-empty { min-height: 0; text-align: center; margin: 0; }
.pcl .df-ubtn:disabled { opacity: 0.7; border: 1px solid rgba(255, 255, 255, 0.18); }