/* Monster eggs: card, hatch reveal, collection, and the recolour recipes for hatched looks. */
.egg-card{background:linear-gradient(160deg,#fff8ee,#f6ecf4);border:1px solid #e6d7e3;border-radius:22px;padding:16px 18px;margin:16px 0}
.egg-head{display:flex;gap:14px;align-items:center}
.egg-head h2{margin:0;font-size:20px}
.egg-head p{margin:2px 0 0}
.egg-balances{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 2px;font-weight:600}
.egg-actions{flex-wrap:wrap;gap:8px;margin:10px 0 4px}
/* The waiting pill sits in a row with buttons that can wrap to two lines, so it stretches to match
   them. Centre its text in that box instead of leaving it stranded at the top. */
.egg-actions>.pill{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.egg-gem{width:1.15em;height:1.15em;vertical-align:-.2em;flex-shrink:0}
.egg-balances .egg-gems{display:inline-flex;align-items:center;gap:5px}
.egg-milestone{display:flex;align-items:center;gap:4px}
.egg-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.egg-status{min-height:20px;margin:4px 0}
.egg-odds-details{margin:8px 0;font-size:14px}
.egg-odds-details summary{cursor:pointer;font-weight:600}
.egg-collection-wrap h3{font-size:15px;margin:14px 0 8px}
.egg-collection{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.egg-collection-item{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:8px 4px;border-radius:14px;background:#fffaf1;border:1px solid #eadfcd;min-width:0}
.egg-collection-item .monster-art{width:64px;height:72px}
.egg-collection-item .small{font-size:11px;line-height:1.25}
.egg-collection-item[data-rarity=rare]{border-color:#9bc2e6;background:#eef6fd}
.egg-collection-item[data-rarity=legendary]{border-color:#e0bb52;background:#fff7dc}
.egg-unknown .small{opacity:.75}
@media(max-width:420px){.egg-collection{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Egg art tiers (public/egg-art.mjs). */
.egg-art{display:block;overflow:visible}
.egg-trio{display:flex;align-items:flex-end;flex-shrink:0}
.egg-trio .egg-art{width:30px;height:35px;margin-right:-8px;animation:egg-idle 3.6s ease-in-out infinite;transform-origin:50% 90%}
.egg-trio .egg-art[data-rarity=rare]{width:36px;height:42px;animation-delay:.6s;position:relative;z-index:1}
.egg-trio .egg-art[data-rarity=legendary]{width:44px;height:52px;animation-delay:1.2s;margin-right:0}
.egg-silhouette{width:56px;height:66px;margin:3px 0}
.egg-odds{list-style:none;padding:0;margin:8px 0;display:grid;gap:8px}
.egg-odds li{display:grid;grid-template-columns:40px 1fr;column-gap:10px;align-items:center;padding:6px 10px;border-radius:14px;background:#fffaf1;border:1px solid #eadfcd}
.egg-odds li strong{display:block}
.egg-odds li[data-rarity=rare]{background:#eef6fd;border-color:#9bc2e6}
.egg-odds li[data-rarity=legendary]{background:#fff5d6;border-color:#e6bf55}
.egg-odds-art{width:40px;height:47px;grid-row:span 2}
.egg-rays{transform-origin:60px 76px;animation:egg-spin 14s linear infinite}
.egg-sparkles path{animation:monster-sparkle 1.8s ease-in-out infinite}
.egg-sparkles path:nth-child(2n){animation-delay:.7s}

.egg-reveal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:#2c203acc}
.egg-shell{position:absolute;width:170px;height:198px;animation:egg-wobble .35s ease-in-out 3 alternate;transform-origin:50% 90%}
.egg-reveal[data-rarity=rare] .egg-shell{filter:drop-shadow(0 0 18px #8ec8f2)}
.egg-reveal[data-rarity=legendary] .egg-shell{filter:drop-shadow(0 0 26px #ffd35c)}
.egg-half{position:absolute;inset:0;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,1.4,.6,1),opacity .55s ease}
.egg-reveal-body{position:relative;background:#fffaf3;border-radius:24px;padding:18px 22px;max-width:340px;width:100%;text-align:center;opacity:0;transform:scale(.85);transition:opacity .35s ease .15s,transform .35s ease .15s}
.egg-reveal-body h2{margin:8px 0 0}
.egg-reveal-body .actions{justify-content:center}
.egg-reveal-art.monster-art{width:190px;height:218px}
.egg-reveal[data-rarity=rare] .egg-reveal-body{box-shadow:0 0 0 3px #8fb0d6,0 0 40px #8fb0d6aa}
.egg-reveal[data-rarity=legendary] .egg-reveal-body{box-shadow:0 0 0 3px #e0bb52,0 0 60px #f5d77acc}
.egg-rarity{text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.egg-open .egg-shell{animation:none}
.egg-open .egg-top{transform:translate(-50px,-130px) rotate(-40deg);opacity:0}
.egg-open .egg-bottom{transform:translateY(110px) rotate(6deg);opacity:0}
.egg-open .egg-reveal-body{opacity:1;transform:none}
.egg-look-art.monster-art{width:80px;height:90px}
@keyframes egg-idle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
@keyframes egg-wobble{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes egg-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.egg-trio .egg-art,.egg-shell,.monster-sparkle,.egg-rays,.egg-sparkles path{animation:none!important}.egg-half,.egg-reveal-body{transition:none}}

/* Hatched looks are baked sprites (assets/monsters, scripts/generate-monster-sprites.mjs).
   Only the legendary glow stays in CSS, so it can follow the art at any size. */
.monster-art[data-variant=shiny]{filter:drop-shadow(0 0 6px #f7d774)}
@keyframes monster-sparkle{0%,100%{opacity:.2}50%{opacity:1}}