/* ZAZA Eggs (rpg/ui-eggs.js): the Bag's ZAZA Eggs block, the Daily tracker's 🥚 chip and the hatch window. The Bag's own
   tiles and navy (world.css .bag), gold for a Golden egg and for an egg that's ready. */
.eggs { display: grid; gap: 6px; margin: 6px 0 8px; }
.egg-warm { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 6px; border-radius: 8px; background: rgba(3, 10, 44, 0.6); border: 1px solid #2e3d74; }
.egg-warm.rare { border-color: rgba(255, 210, 63, 0.55); box-shadow: inset 0 0 14px rgba(255, 210, 63, 0.08); }
.egg-warm.ready { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 210, 63, 0.35); }
.egg-warm .egg-ico { flex: none; width: 48px; height: 48px; image-rendering: pixelated; }
.egg-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.egg-txt b { font-weight: 400; color: #fff; font-size: 16px; line-height: 1.1; }
.egg-txt small { color: var(--muted); font-size: 12px; line-height: 1.2; }
.egg-txt small.egg-need { color: #c9d4ff; }
.egg-warm.ready small.egg-need { color: var(--gold); }
.egg-bar { display: block; height: 7px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); border: 1px solid #2e3d74; overflow: hidden; }
.egg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffb32a, #ffe36b); transition: width 0.6s; }
.egg-hatch { flex: none; white-space: nowrap; }
.egg-wait { margin: 0; }
.egg-wait > button { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 6px; background: rgba(3, 10, 44, 0.6); border: 1px solid #2e3d74; font: inherit; font-size: 15px; color: #dfe6ff; cursor: pointer; }
.egg-wait > button:hover { border-color: var(--gold); }
.egg-wait > button:disabled { opacity: 0.6; cursor: wait; }
.egg-wait .egg-ico { width: 32px; height: 32px; image-rendering: pixelated; }
.egg-wait small { color: var(--muted); font-size: 12px; }
.egg-wait i { font-style: normal; font-size: 12px; color: var(--gold); }
/* ⏳ Hatching time (egg-shop.js): the warming egg's minutes bought with $ZAZA, right under it. */
.egg-time { display: grid; gap: 6px; padding: 7px 10px; border-radius: 8px; border: 1px dashed rgba(255, 210, 63, 0.5); background: rgba(3, 10, 44, 0.45); }
.egg-time-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; margin: 0; }
.egg-time-h b { font-family: var(--display); font-weight: 400; font-size: 15px; color: var(--gold); }
.egg-time-h small { font-size: 13px; color: var(--muted); }
.egg-time-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.egg-time-b { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(255, 210, 63, 0.6); background: rgba(255, 210, 63, 0.1); color: #dfe6ff; font: inherit; font-size: 14px; cursor: pointer; }
.egg-time-b b { font-family: var(--display); font-weight: 400; color: var(--gold); }
.egg-time-b:hover:not(:disabled) { background: rgba(255, 210, 63, 0.2); }
.egg-time-b.on { box-shadow: 0 0 0 2px var(--gold); }
.egg-time-b:disabled { opacity: 0.5; cursor: default; }
.egg-time-ok { display: grid; gap: 6px; padding: 7px 9px; border-radius: 8px; background: rgba(255, 210, 63, 0.08); }
.egg-time-ok p { margin: 0; display: grid; gap: 2px; }
.egg-time-ok p b { font-weight: 400; font-size: 15px; color: #fff; }
.egg-time-ok p span { font-size: 13px; color: #c3cdee; }
.egg-time-ok div { display: flex; flex-wrap: wrap; gap: 8px; }
.egg-time [data-egg-time-act]:empty { display: none; }
.egg-time .xpb-msg { margin: 0; }
.egg-time-note { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.egg-pool { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.35; }
.egg-pool b { color: var(--gold); font-weight: 400; }
.egg-ico.wobble { animation: egg-wobble 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes egg-wobble { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: -8deg; } 80% { rotate: 7deg; } 90% { rotate: -4deg; } }

/* The Daily tracker's chip (rpg/ui-daily.js, eggChipHTML): how far the warming egg is; gold when it's ready, faded and
   dashed (idle) while the last minute had no play in it. */
.daily-track .dt-egg { flex: none; display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px; border-radius: 9px; white-space: nowrap; border: 1px solid rgba(255, 210, 63, 0.45); font-size: 14px; line-height: 1; color: #ffe9a6; }
.daily-track .dt-egg i { font-style: normal; font-size: 12px; line-height: 1; }
.daily-track .dt-egg b { font-weight: 400; translate: 0 0.09em; }
.daily-track .dt-egg.idle { border-style: dashed; border-color: rgba(201, 212, 255, 0.4); color: var(--muted); }
.daily-track .dt-egg.idle i { opacity: 0.55; }
.daily-track .dt-egg.ready { background: var(--gold); border-color: var(--gold); color: #1a1405; animation: egg-glow 1.4s ease-in-out infinite; }
@keyframes egg-glow { 50% { box-shadow: 0 0 8px rgba(255, 210, 63, 0.8); } }
@media (max-width: 760px) {
  .daily-track .dt-egg { gap: 1px; margin-left: 0; padding: 1px 3px; font-size: 12px; }
  .daily-track .dt-egg i { font-size: 11px; }
}
/* What its % means, in a card under it while the mouse is over it (ui-eggs.js eggTipHTML). Phones tap straight to the Bag. */
.daily-track .dt-egg { position: relative; }
.dt-egg-tip { display: none; position: absolute; top: calc(100% + 8px); right: -8px; z-index: 20; width: 236px; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; background: rgba(3, 10, 44, 0.96); border: 1px solid rgba(255, 210, 63, 0.6); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); font-size: 13px; line-height: 1.35; color: #c9d4ff; text-align: left; white-space: normal; pointer-events: none; }
.dt-egg-tip > * { display: block; }
.dt-egg-tip > * + * { margin-top: 4px; }
.daily-track .dt-egg-tip b { font-weight: 400; font-size: 15px; color: var(--gold); translate: none; }
.daily-track .dt-egg-tip .det-now { color: #fff; }
.daily-track .dt-egg-tip .det-tap { color: var(--muted); font-size: 12px; }
@media (hover: hover) { .daily-track .dt-egg:hover .dt-egg-tip { display: block; } }

/* The hatch window (ui-eggs.js hatchWindow): the egg on a lit stage cracks three times (data-st 1-3, its glow growing),
   shakes white-hot (.charged), then bursts (.hatched): a flash, the window jolts (.modal.egg-boom), rays turn, a baby
   ZAZA sits in the shell; the particles are on .egg-fx over the whole window. Then what it held pops in ([data-pop].on):
   a prize on its gold card, the XP and each material as tiles. A Golden egg (.rare) is gold all through. */
.egg-book { position: relative; }
.egg-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.egg-h { display: inline-block; }
.egg-h.pop { animation: egg-title 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes egg-title { from { scale: 0.6; } }
.egg-stage { position: relative; height: 216px; margin: 6px 0 12px; border-radius: 14px; overflow: hidden; border: 1px solid #2e3d74; background: radial-gradient(circle at 50% 58%, #2a3a84 0, #131c4e 45%, #070c2a 100%); box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.6); }
.egg-book.rare .egg-stage { border-color: rgba(255, 210, 63, 0.6); background: radial-gradient(circle at 50% 58%, #5a4416 0, #221d40 48%, #080a26 100%); }
.egg-rays { position: absolute; left: 50%; top: 54%; width: 540px; height: 540px; margin: -270px 0 0 -270px; border-radius: 50%; background: repeating-conic-gradient(rgba(200, 222, 255, 0.34) 0 9deg, transparent 9deg 22.5deg); -webkit-mask: radial-gradient(circle, #000 16%, transparent 62%); mask: radial-gradient(circle, #000 16%, transparent 62%); opacity: 0; scale: 0.4; transition: opacity 0.5s, scale 0.7s cubic-bezier(0.2, 1.4, 0.4, 1); animation: egg-spin 14s linear infinite; }
.egg-book.rare .egg-rays { background: repeating-conic-gradient(rgba(255, 214, 90, 0.5) 0 9deg, transparent 9deg 22.5deg); }
.egg-book[data-st="3"] .egg-rays { opacity: 0.3; scale: 0.7; }
.egg-book.hatched .egg-rays { opacity: 1; scale: 1; }
@keyframes egg-spin { to { rotate: 360deg; } }
.egg-glow { position: absolute; left: 50%; top: 56%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 170, 0.8), rgba(255, 210, 63, 0.25) 42%, transparent 70%); opacity: 0.12; transition: opacity 0.3s, scale 0.3s; }
.egg-book[data-st="1"] .egg-glow { opacity: 0.3; }
.egg-book[data-st="2"] .egg-glow { opacity: 0.5; scale: 1.08; }
.egg-book[data-st="3"] .egg-glow { opacity: 0.75; scale: 1.18; }
.egg-book.charged .egg-glow { opacity: 1; scale: 1.4; animation: egg-throb 0.18s ease-in-out infinite alternate; }
.egg-book.hatched .egg-glow { opacity: 0.6; scale: 1.25; }
@keyframes egg-throb { to { scale: 1.55; } }
.egg-tap, .egg-baby { position: absolute; left: 50%; top: 50%; translate: -50% -46%; z-index: 1; }
.egg-tap { padding: 0; border: 0; background: none; line-height: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.egg-tap:focus-visible { outline: 2px dashed var(--gold); outline-offset: 6px; border-radius: 8px; }
.egg-px, .egg-baby { display: block; width: 128px; height: 128px; image-rendering: pixelated; }
.egg-px { transform-origin: 50% 90%; animation: egg-idle 1.4s ease-in-out infinite; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35)); }
.egg-book.rare .egg-px { filter: drop-shadow(0 0 10px rgba(255, 210, 63, 0.75)); }
.egg-book[data-st="2"] .egg-px { animation-duration: 0.9s; }
.egg-book[data-st="3"] .egg-px { animation-duration: 0.55s; }
.egg-book .egg-px.hit { animation: egg-hit 0.38s ease-out; }
.egg-book.charged .egg-px { animation: egg-tremble 0.07s linear infinite; filter: brightness(1.3) drop-shadow(0 0 16px #fff6c4); }
.egg-book.hatched .egg-tap { visibility: hidden; }
@keyframes egg-idle { 0%, 100% { rotate: 0deg; } 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes egg-hit { 0% { scale: 1.14 0.84; } 30% { scale: 0.94 1.08; rotate: -11deg; } 55% { scale: 1.03 0.97; rotate: 8deg; } 80% { rotate: -4deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes egg-tremble { 0% { translate: -3px 0; } 50% { translate: 3px -1px; } 100% { translate: -1px 1px; } }
.egg-baby { opacity: 0; pointer-events: none; }
.egg-book.hatched .egg-baby { animation: egg-baby 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) forwards, egg-bob 1.6s ease-in-out 1s infinite; }
@keyframes egg-baby { 0% { opacity: 0; scale: 0.3; } 40% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
@keyframes egg-bob { 0%, 100% { translate: -50% -46%; } 50% { translate: -50% -51%; } }
.egg-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 56%, #fff, rgba(255, 255, 255, 0.85) 35%, rgba(255, 246, 196, 0.4) 75%); }
.egg-book.hatched .egg-flash { animation: egg-flash 0.6s ease-out; }
@keyframes egg-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.egg-book .egg-say { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; margin: 0; font-family: var(--display); font-size: 16px; line-height: 1.2; color: #fff; text-align: center; text-shadow: 0 2px 0 #000; pointer-events: none; animation: egg-say 1s ease-in-out infinite; }
.egg-book.hatched .egg-say { opacity: 0; transition: opacity 0.2s; animation: none; }
@keyframes egg-say { 50% { scale: 1.06; } }
.modal.egg-boom { animation: egg-boom 0.45s ease-out; }
@keyframes egg-boom { 0%, 100% { translate: 0 0; } 15% { translate: -7px 3px; } 30% { translate: 6px -4px; } 45% { translate: -4px 2px; } 60% { translate: 3px -1px; } 80% { translate: -1px 0; } }
.egg-book [data-pop] { opacity: 0; visibility: hidden; }
.egg-book [data-pop].on { visibility: visible; animation: egg-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) forwards; }
@keyframes egg-pop { 0% { opacity: 0; scale: 0.6; translate: 0 10px; } 100% { opacity: 1; scale: 1; translate: 0 0; } }
/* A prize: its own gold card, a shine sweeping over it. */
.egg-jackpot { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; margin: 0 0 10px; padding: 10px 14px 12px; border-radius: 12px; border: 2px solid var(--gold); background: linear-gradient(180deg, rgba(255, 210, 63, 0.24), rgba(255, 152, 31, 0.1)); box-shadow: 0 0 18px rgba(255, 210, 63, 0.4), inset 0 0 14px rgba(255, 210, 63, 0.18); }
.egg-jackpot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%); translate: -100% 0; animation: ej-shine 2.4s ease-in-out 1s infinite; }
@keyframes ej-shine { 0% { translate: -100% 0; } 60%, 100% { translate: 100% 0; } }
.ej-rib { grid-column: 1 / -1; justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--gold); color: #1a1405; font-family: var(--display); font-size: 13px; line-height: 1.4; letter-spacing: 0.03em; text-transform: uppercase; }
.ej-art { width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 0 10px rgba(255, 210, 63, 0.9)); animation: ej-float 1.8s ease-in-out infinite; }
.ej-mark { display: block; font-size: 50px; line-height: 64px; text-align: center; }
@keyframes ej-float { 50% { translate: 0 -4px; } }
.egg-book .egg-jackpot p { margin: 0; font-size: 16px; line-height: 1.35; color: #fff3c4; }
/* The XP and the materials, as tiles. */
.egg-tiles { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.egg-tile { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 92px; padding: 8px 10px; box-sizing: border-box; border-radius: 10px; border: 1px solid #34468a; background: linear-gradient(180deg, #1a2663, #141e52); box-shadow: 0 3px 0 #000a2e; text-align: center; }
.egg-tile .ri { width: 40px; height: 40px; image-rendering: pixelated; }
.egg-tile b { font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.1; color: #fff; }
.egg-tile small { max-width: 110px; font-size: 12px; line-height: 1.2; color: #bcc5ea; }
.egg-tile.xp { border-color: rgba(127, 212, 255, 0.6); box-shadow: 0 3px 0 #000a2e, 0 0 12px rgba(127, 212, 255, 0.25); }
.egg-tile.xp b { font-size: 26px; color: #7fd4ff; font-variant-numeric: tabular-nums; }
.egg-book .egg-none { margin: 0 0 8px; font-size: 13px; line-height: 1.35; color: var(--muted); text-align: center; }
.egg-book .egg-next { text-align: center; }
.egg-book .actions { justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .egg-ico.wobble, .daily-track .dt-egg.ready { animation: none; }
  .egg-px, .egg-rays, .egg-glow, .egg-book .egg-say, .egg-jackpot::after, .ej-art, .modal.egg-boom, .egg-h.pop { animation: none !important; }
  .egg-book.hatched .egg-baby { animation: none; opacity: 1; }
  .egg-book.hatched .egg-flash { animation: none; }
  .egg-book [data-pop], .egg-book [data-pop].on { opacity: 1; visibility: visible; animation: none; }
}

/* The Golden egg's Hatchery in 3D (rpg/hatchery3d.js): the room fills the stage, its poster shows while it loads, the flat
   egg and its rays step aside; the whole stage is the tap target. After the burst it gives the prize room below. */
.egg-stage.h3d { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 48vh; background: #020308 center / cover no-repeat; border-color: rgba(255, 210, 63, 0.7); transition: max-height 0.8s ease 1.6s; }
.egg-stage.h3d.done { max-height: 34vh; }
.egg-stage.h3d .h3d-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s; }
.egg-stage.h3d .h3d-canvas.on { opacity: 1; }
.egg-stage.h3d .egg-rays, .egg-stage.h3d .egg-glow, .egg-stage.h3d .egg-px, .egg-stage.h3d .egg-baby { display: none; }
.egg-stage.h3d .egg-tap { inset: 0; translate: none; width: 100%; height: 100%; }
.egg-stage.h3d.loading .egg-say { opacity: 0.85; }
.egg-stage.h3d.loading::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, transparent 30%, rgba(255, 230, 150, 0.12) 50%, transparent 70%) 0 0 / 250% 100%; animation: h3d-shine 1.4s linear infinite; pointer-events: none; }
@keyframes h3d-shine { from { background-position: 125% 0; } to { background-position: -125% 0; } }
/* The Bag's door to the Hatchery: a strip along the foot of the warming Golden egg's own card (the card wraps it onto a
   row of its own, edge to edge), a still of the room on the left. */
.egg-warm.has-peek { flex-wrap: wrap; row-gap: 7px; padding-bottom: 0; overflow: hidden; }
.egg-peek { flex: 0 0 calc(100% + 16px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; margin: 0 -10px 0 -6px; padding: 5px 10px 5px 6px; border: 0; border-top: 1px solid rgba(255, 210, 63, 0.3); background: rgba(255, 210, 63, 0.06); color: #dfe6ff; font: inherit; text-align: left; cursor: pointer; transition: background 0.15s; }
.egg-peek-pic { position: relative; display: block; width: 64px; aspect-ratio: 16 / 9; border-radius: 5px; overflow: hidden; border: 1px solid rgba(255, 210, 63, 0.5); background: #020308; }
.egg-peek-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.egg-peek-pic em { position: absolute; left: 2px; top: 2px; padding: 0 3px; border-radius: 3px; background: var(--gold); color: var(--navy-900); font-style: normal; font-size: 10px; line-height: 12px; }
.egg-peek-txt { min-width: 0; display: grid; gap: 1px; }
.egg-peek-txt b { font-family: var(--display); font-weight: 400; color: var(--gold); font-size: 14px; letter-spacing: 0.02em; line-height: 1.1; }
.egg-peek-txt small { color: #c9d4ff; font-size: 12px; line-height: 1.15; }
.egg-peek > i { font-style: normal; color: var(--gold); font-size: 20px; line-height: 1; transition: translate 0.15s; }
.egg-peek:hover { background: rgba(255, 210, 63, 0.14); }
.egg-peek:hover > i { translate: 2px 0; }
.egg-peek:focus-visible { outline: 2px dashed var(--gold); outline-offset: -3px; }

/* 🍳 The Cook's Omelette fuse (rpg/ui-eggs.js omeletteWindow): the recipe as a sum, eggs + parts → a Golden egg and its
   chance; under it what each takes and what you have (sockets.css .so-pouch rows, .so-roll for how a try went). */
.oml-eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 8px; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(255, 140, 60, 0.55); background: radial-gradient(circle at 50% 60%, rgba(255, 150, 60, 0.16), rgba(3, 10, 44, 0.6) 75%); }
.oml-eq > i { font-style: normal; font-size: 20px; color: var(--muted); }
.oml-eq > i.so-odds { font-size: 15px; }
.oml-in { display: inline-flex; align-items: center; gap: 2px; }
.oml-in b { font-weight: 400; color: #fff; font-size: 15px; }
.oml-in .egg-ico { width: 48px; height: 48px; image-rendering: pixelated; }
.oml-in .ri { width: 32px; height: 32px; image-rendering: pixelated; }
.oml-in.out .egg-ico { filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.7)); }
.oml-need li > span small { display: block; }
.oml-need li small.no { color: var(--rs-orange); }
.oml-need .egg-ico { width: 32px; height: 32px; image-rendering: pixelated; }
.so-roll .egg-ico { flex: none; width: 32px; height: 32px; image-rendering: pixelated; }
.so-roll.cracked .egg-ico { filter: grayscale(0.7) brightness(0.7); }
.egg-pan b { color: #ffb07a; }