/* golden-egg-v3.css — Golden Egg underwater/gold redesign (2026-07-28, design final).
   Shell mirrors Lucky Draw/Scratch v3: ≥980 centered 400px panel · <980 bottom sheet.
   Close ✕ = .ge3-close, member of the modal-close-unify.css roster (32px spec). */

/* ── shell ─────────────────────────────────────────────────────── */
html body #modal-egg.modal-backdrop {
  background: rgba(4, 8, 12, .8) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  backdrop-filter: blur(5px) !important;
  z-index: 210 !important;
}
html body #modal-egg .modal {
  background:
    linear-gradient(180deg, rgba(9, 38, 50, .85), rgba(4, 14, 22, .94)),
    url('../img/bg/underwater-modal.jpg') center / cover no-repeat !important;
  border: 1px solid var(--fz-line-2, rgba(255,255,255,.14)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .65) !important;
  position: relative !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* mobile-phase1 .modal{align-items:flex-end} would right-collapse children */
  justify-content: flex-start !important;
  color: #fff;
}
@media (max-width: 979px) {
  html body #modal-egg.modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  html body #modal-egg .modal {
    width: 100% !important; max-width: 100vw !important;
    border-radius: 18px 18px 0 0 !important; border-bottom: none !important;
    max-height: 92vh !important; margin: 0 !important;
  }
}
@media (min-width: 980px) {
  html body #modal-egg.modal-backdrop { align-items: center !important; padding: 24px !important; }
  html body #modal-egg .modal {
    width: 100% !important; max-width: 400px !important;
    border-radius: 18px !important; margin: auto !important; max-height: 92vh !important;
  }
}

/* ── header ────────────────────────────────────────────────────── */
#modal-egg .ge3-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; flex: 0 0 auto; }
#modal-egg .ge3-badge {
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 50% / 58% 58% 42% 42%;
  display: flex; align-items: center; justify-content: center;
  color: #6E5205;  /* cracked-egg glyph (inline SVG — Tabler font icons are banned: prod font subset) */
  background: radial-gradient(circle at 32% 26%, #FFF3C4, #FFD700 45%, #C8940A);
  border: 1px solid rgba(255, 240, 184, .55);
  box-shadow: 0 0 14px rgba(245, 200, 66, .45), inset 0 -2px 4px rgba(0, 0, 0, .3), inset 0 2px 3px rgba(255, 255, 255, .5);
}
#modal-egg .ge3-title {
  font-family: var(--fz-font-display, 'Oswald', sans-serif);
  font-size: 22px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fz-white, #fff); line-height: 1;
  text-shadow: 0 1px 12px rgba(245, 200, 66, .35);
}
#modal-egg .ge3-sub { font-size: 11.5px; color: var(--fz-text-3, #6E7B88); margin-top: 3px; }

/* ── stage: near-black so the gold pops ────────────────────────── */
#modal-egg .ge3-stage {
  position: relative; overflow: hidden; flex: 0 0 auto;
  margin: 14px 18px 0; border-radius: 16px;
  border: 1px solid rgba(255, 215, 0, .35);
  background:
    radial-gradient(120% 110% at 50% 108%, rgba(199, 149, 23, .2), transparent 45%),
    radial-gradient(140% 110% at 50% -10%, rgba(9, 42, 56, .9), rgba(4, 14, 22, .97) 62%),
    #030B12;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .55);
  padding: 14px 14px 0;
}
#modal-egg .ge3-spot {  /* spotlight cone from top centre */
  position: absolute; left: -25%; top: 0; width: 150%; height: 100%; pointer-events: none;
  background: conic-gradient(from 178deg at 50% 0%, transparent, rgba(255, 232, 150, .13) 8deg, rgba(255, 232, 150, .2) 12deg, rgba(255, 232, 150, .13) 16deg, transparent 24deg);
}
#modal-egg .ge3-beam {
  position: absolute; top: -30%; width: 30px; height: 160%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 75%);
  transform: skewX(-13deg); filter: blur(6px);
  animation: ge3Breathe 8s ease-in-out infinite;
}
#modal-egg .ge3-beam1 { left: 16%; }
#modal-egg .ge3-beam2 { left: 68%; animation-delay: 2.6s; }
@keyframes ge3Breathe { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
#modal-egg .ge3-spark { position: absolute; color: rgba(255, 224, 130, .85); pointer-events: none; line-height: 0; }
#modal-egg .ge3-spark1 { left: 12%; top: 40%; animation: fzTwinkle 2.4s ease-in-out infinite; }
#modal-egg .ge3-spark2 { right: 10%; top: 26%; animation: fzTwinkle 3.1s ease-in-out .8s infinite; }
#modal-egg .ge3-spark3 { right: 22%; bottom: 24%; animation: fzTwinkle 2.8s ease-in-out 1.5s infinite; }
@keyframes fzTwinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }

/* jackpot hero */
#modal-egg .ge3-hero { position: relative; text-align: center; padding: 2px 0 10px; }
#modal-egg .ge3-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245, 200, 66, .75);
}
#modal-egg .ge3-line { display: block; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, rgba(245, 200, 66, .55)); }
#modal-egg .ge3-eyebrow > .ge3-line:last-child { background: linear-gradient(270deg, transparent, rgba(245, 200, 66, .55)); }
#modal-egg .ge3-max {
  margin-top: 5px;
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 34px; font-weight: 800; line-height: 1.05;
  background: linear-gradient(180deg, #FFF6D0, #FFD700 55%, #C8940A);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(245, 200, 66, .45));
}
#modal-egg .ge3-status {
  margin-top: 5px;
  font-family: var(--fz-font-display, 'Oswald', sans-serif);
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245, 200, 66, .8);
}

/* ── the three eggs ────────────────────────────────────────────── */
#modal-egg .ge3-eggs {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-items: end; justify-items: center;
  padding: 6px 2px 30px;
}
#modal-egg .ge3-slot { position: relative; width: 100%; max-width: 96px; transition: opacity .35s ease; }
#modal-egg .ge3-slot.ge3-dim { opacity: .45; }
#modal-egg .ge3-egg {
  position: relative; display: block; width: 100%; aspect-ratio: 0.78;
  padding: 0; border: none; cursor: pointer; overflow: hidden;
  border-radius: 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 34% 22%, #FFFBE8, #FFE45C 30%, #F5C518 52%, #C8940A 76%, #93690A 94%, #7A5308);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, .8),
    inset 0 -6px 12px rgba(90, 62, 8, .65),
    inset -4px 0 8px rgba(148, 105, 10, .35),
    inset 0 0 0 1px rgba(255, 246, 208, .35),
    inset 3px -3px 8px rgba(255, 214, 90, .3),
    0 0 18px rgba(245, 200, 66, .35);
  transform-origin: 50% 88%;
  animation: fzEggTeeter 3.2s ease-in-out infinite;
  transition: translate .18s ease;
}
#modal-egg .ge3-egg:hover { translate: 0 -4px; }
#modal-egg .ge3-stage.ge3-nudge .ge3-egg { animation: fzEggShake .5s ease-in-out; }
#modal-egg .ge3-egg.ge3-shaking { animation: fzEggShake .8s ease-in-out infinite !important; }
#modal-egg .ge3-hilite {  /* specular dot top-left */
  position: absolute; left: 20%; top: 12%; width: 22%; height: 14%;
  border-radius: 50%; background: rgba(255, 255, 255, .85);
  filter: blur(1px); transform: rotate(-24deg); pointer-events: none;
}
#modal-egg .ge3-band {  /* waist dashed emboss */
  position: absolute; left: 8%; right: 8%; top: 54%; height: 0;
  border-top: 1px dashed rgba(138, 100, 16, .5); pointer-events: none;
}
#modal-egg .ge3-shine {  /* sweeping shimmer clipped by the egg */
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .34) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: fzShimmer 3.4s linear infinite;
}
@keyframes fzShimmer { 0% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
#modal-egg .ge3-q {
  position: absolute; left: 0; right: 0; top: 34%;
  font-size: 24px; font-weight: 800; color: #8A6410; line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 243, 196, .8), 0 -1px 1px rgba(90, 58, 6, .6);
  pointer-events: none;
}
#modal-egg .ge3-crackme {
  position: absolute; left: 0; right: 0; bottom: 14%;
  font-size: 7.5px; font-weight: 800; letter-spacing: .16em; color: #8A6410;
  text-shadow: 0 0 6px rgba(255, 224, 130, .8), 0 1px 0 rgba(255, 243, 196, .7);
  pointer-events: none;
}
/* pedestal + floor reflection */
#modal-egg .ge3-pedestal {
  display: block; width: 78%; height: 14px; margin: -6px auto 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #F5C842, #C79517 45%, #8A6410 78%, #5E430B);
  box-shadow: inset 0 2px 2px rgba(255, 246, 208, .6), 0 6px 10px rgba(0, 0, 0, .55);
}
#modal-egg .ge3-refl {
  position: absolute; left: 0; right: 0; bottom: -26px; height: 42%;
  border-radius: 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 34% 22%, #FFFBE8, #FFE45C 30%, #F5C518 52%, #C8940A 76%, #7A5308);
  transform: scaleY(-0.5); opacity: .14; filter: blur(2px);
  -webkit-mask-image: linear-gradient(0deg, transparent 20%, #000 90%);
  mask-image: linear-gradient(0deg, transparent 20%, #000 90%);
  pointer-events: none;
}
/* floor strip */
#modal-egg .ge3-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(199, 149, 23, .14) 30%, rgba(120, 88, 14, .22));
  border-top: 1px solid rgba(255, 222, 120, .22);
}

/* ── crack burst ───────────────────────────────────────────────── */
#modal-egg .ge3-flash {
  position: absolute; left: -10%; top: 4%; width: 120%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 208, .85), rgba(255, 215, 0, .35) 45%, transparent 70%);
  animation: fzBurstFlash .6s ease-out forwards; pointer-events: none; z-index: 1;
}
#modal-egg .ge3-rays {
  position: absolute; left: -45%; top: -22%; width: 190%; aspect-ratio: 1; border-radius: 50%; z-index: 0;
  background: repeating-conic-gradient(rgba(255, 215, 0, .22) 0 11deg, transparent 11deg 30deg);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation: fzRaysSpin 9s linear infinite; pointer-events: none;
}
#modal-egg .ge3-open { position: relative; width: 100%; aspect-ratio: 0.78; z-index: 2; }
#modal-egg .ge3-shell {
  position: absolute; inset: 0;
  border-radius: 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 34% 22%, #FFFBE8, #FFE45C 30%, #F5C518 52%, #C8940A 76%, #93690A 94%, #7A5308);
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, .8), inset 0 -6px 12px rgba(90, 62, 8, .65);
}
#modal-egg .ge3-shell-top {
  clip-path: polygon(0 0, 100% 0, 100% 55%, 88% 47%, 76% 56%, 64% 46%, 52% 56%, 40% 46%, 28% 56%, 16% 47%, 0 55%);
  animation: fzShellPop .5s ease-out .05s forwards;
}
#modal-egg .ge3-shell-bot {
  clip-path: polygon(0 58%, 12% 50%, 24% 59%, 36% 49%, 48% 59%, 60% 49%, 72% 59%, 84% 50%, 100% 58%, 100% 100%, 0 100%);
}
#modal-egg .ge3-prize {
  position: absolute; left: 0; right: 0; top: 40%; z-index: 3; text-align: center;
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 17px; font-weight: 800; color: #7CF3B4;
  text-shadow: 0 0 14px rgba(30, 213, 113, .75);
  animation: fzPrizeRise .45s cubic-bezier(0.34, 1.5, 0.64, 1) .15s backwards;
}
#modal-egg .ge3-prize-long { font-size: 13px; }
#modal-egg .ge3-prize-none { color: var(--fz-text-2, #A6B0BC); text-shadow: none; }
@keyframes fzEggTeeter {
  0%, 64%, 100% { transform: rotate(0); }
  70% { transform: rotate(-4deg); }
  76% { transform: rotate(3.5deg); }
  82% { transform: rotate(-2.5deg); }
  88% { transform: rotate(1.5deg); }
  94% { transform: rotate(0); }
}
@keyframes fzEggShake {
  0%, 100% { transform: rotate(0) translateX(0); }
  12% { transform: rotate(-9deg) translateX(-3px); }
  26% { transform: rotate(8deg) translateX(3px); }
  40% { transform: rotate(-7deg); }
  54% { transform: rotate(6deg); }
  68% { transform: rotate(-4deg); }
  82% { transform: rotate(3deg); }
}
@keyframes fzShellPop { to { transform: translateY(-30px) rotate(-22deg); opacity: 0; } }
@keyframes fzPrizeRise { from { transform: translateY(12px) scale(.6); opacity: 0; } }
@keyframes fzBurstFlash { from { opacity: .9; transform: scale(.2); } to { opacity: 0; transform: scale(2.1); } }
@keyframes fzRaysSpin { to { transform: rotate(360deg); } }

/* ── count / button / info bar ─────────────────────────────────── */
#modal-egg .ge3-count {
  text-align: center; margin: 10px 0 8px; flex: 0 0 auto;
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 700; color: var(--fz-gold, #F5C842); letter-spacing: .02em;
}
#modal-egg .ge3-btn {
  height: 50px; border-radius: 14px; margin: 0 18px 10px; border: none; cursor: pointer; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--fz-font-body, 'Inter', sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: .03em;
  color: var(--fz-on-gold, #14110A);
  background: linear-gradient(180deg, #FFE082 0%, #F5C842 45%, #C08E1A 100%);
  box-shadow: 0 6px 18px rgba(245, 200, 66, .35), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .15s ease, box-shadow .15s ease;
}
#modal-egg .ge3-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(245, 200, 66, .45), inset 0 1px 0 rgba(255, 255, 255, .5); }
#modal-egg .ge3-btn:not(:disabled):active { transform: translateY(0) scale(.985); }
#modal-egg .ge3-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: grayscale(1); }
#modal-egg .ge3-loader { animation: ge3Rot 1s linear infinite; }
@keyframes ge3Rot { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#modal-egg .ge3-info {
  margin: 0 18px 18px; padding: 10px 12px; border-radius: 10px; flex: 0 0 auto;
  background: rgba(245, 200, 66, .1);
  border: 1px solid rgba(245, 200, 66, .28);
  color: #EFD48A; font-size: 10.5px; line-height: 1.55; text-align: center;
}

/* ── result card (family style) ────────────────────────────────── */
#modal-egg .ge3-win-ov {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 8, 12, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  cursor: pointer;
  animation: ge3OvIn .25s ease-out;
}
@keyframes ge3OvIn { from { opacity: 0; } to { opacity: 1; } }
#modal-egg .ge3-win-card {
  position: relative; overflow: hidden; text-align: center;
  width: min(320px, 84%); padding: 24px 20px 18px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(30, 213, 113, .16), rgba(8, 28, 38, .85));
  border: 1px solid rgba(30, 213, 113, .45);
  box-shadow: 0 0 34px rgba(30, 213, 113, .25), inset 0 1px 0 rgba(255, 255, 255, .14);
  animation: ge3CardIn .3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes ge3CardIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
#modal-egg .ge3-win-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: ge3Sheen 2.2s linear infinite;
}
@keyframes ge3Sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
#modal-egg .ge3-win-ico { font-size: 34px; line-height: 1; }
#modal-egg .ge3-win-eyebrow {
  margin-top: 8px; font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #4EF09A;
}
#modal-egg .ge3-win-amt {
  margin-top: 6px;
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 28px; font-weight: 800; color: #fff; line-height: 1.1;
  text-shadow: 0 0 18px rgba(30, 213, 113, .55);
}
#modal-egg .ge3-win-sub { margin-top: 6px; font-size: 11px; color: rgba(255, 255, 255, .65); }
#modal-egg .ge3-win-tap { margin-top: 14px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .35); }
#modal-egg .ge3-win-card.ge3-win-none {
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(8, 20, 28, .88));
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 0 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .1);
}
#modal-egg .ge3-win-card.ge3-win-none .ge3-win-eyebrow { color: var(--fz-text-2, #A6B0BC); }
#modal-egg .ge3-win-card.ge3-win-none .ge3-win-amt { text-shadow: none; }

/* ── loading / disabled states ─────────────────────────────────── */
#modal-egg .ge3-loading { padding: 48px 24px; text-align: center; color: rgba(255, 255, 255, .4); font-size: 13px; }
#modal-egg .ge3-off { padding: 34px 24px 60px; text-align: center; }
#modal-egg .ge3-off-ico { font-size: 40px; margin-bottom: 10px; opacity: .4; }
#modal-egg .ge3-off-t { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .6); margin-bottom: 6px; }
#modal-egg .ge3-off-s { font-size: 12px; color: rgba(255, 255, 255, .3); }

/* reduced motion: kill decorative loops, keep the crack reveal */
@media (prefers-reduced-motion: reduce) {
  #modal-egg .ge3-egg, #modal-egg .ge3-shine, #modal-egg .ge3-beam, #modal-egg .ge3-spark,
  #modal-egg .ge3-rays, #modal-egg .ge3-win-card::after { animation: none !important; }
}