/* mg-entry-v3.css — Home "Mini games" entry card, photo-banner redesign (2026-07-28).
   Presentation only: #fz-minigames-card keeps its id + onclick (__pfminigames.open).
   Dynamic bits (game-count badge / pearls / N GAMES INSIDE) are painted by
   minigames-page.js from its GAMES list — never hardcoded here.
   Reuses global family keyframes fzShimmer/fzTwinkle (golden-egg-v3.css) and
   fzBreathe (fz-home.css); defines fzSpinRing + fzCtaPulse. */

html body #fz-minigames-card {
  position: relative; overflow: hidden; width: 100%; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 15px;
  border-radius: 16px; padding: 18px;
  border: 1px solid rgba(245, 200, 66, 0.5);
  background:
    linear-gradient(100deg, rgba(5, 20, 30, 0.94) 0%, rgba(8, 30, 44, 0.82) 42%, rgba(10, 36, 52, 0.45) 75%, rgba(12, 40, 56, 0.3) 100%),
    url('../img/bg/underwater-modal.jpg') right center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 18px rgba(245, 200, 66, 0.12);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: var(--fz-font-body, 'Inter', sans-serif);
}
html body #fz-minigames-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 200, 66, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(245, 200, 66, 0.22);
}
html body #fz-minigames-card:active { transform: translateY(0) scale(.995); }

/* ── overlay layers ── */
#fz-minigames-card .mg3-warm {         /* ① left warm gold glow */
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(80% 140% at 8% 50%, rgba(245, 200, 66, 0.16), transparent 55%);
}
#fz-minigames-card .mg3-topline {      /* ② top gold hairline */
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(255, 233, 168, 0.55), transparent);
}
#fz-minigames-card .mg3-shimmer {      /* ③ sweeping shimmer */
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%);
  background-size: 220% 100%;
  animation: fzShimmer 3.6s linear infinite;
}
#fz-minigames-card .mg3-beam {         /* ④ breathing slanted beam */
  position: absolute; top: -40%; left: 30%; width: 46px; height: 180%; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 75%);
  transform: skewX(-13deg); filter: blur(6px);
  animation: fzBreathe 8s ease-in-out infinite;
}
#fz-minigames-card .mg3-spark { position: absolute; color: rgba(255, 224, 130, 0.85); line-height: 0; pointer-events: none; z-index: 1; }
#fz-minigames-card .mg3-spark1 { left: 46%; top: 16%; animation: fzTwinkle 2.4s ease-in-out infinite; }
#fz-minigames-card .mg3-spark2 { right: 20%; bottom: 18%; animation: fzTwinkle 3.1s ease-in-out .9s infinite; }
#fz-minigames-card .mg3-wm {           /* ⑥ big coin watermark */
  position: absolute; right: 96px; top: 50%; transform: translateY(-50%) rotate(-12deg);
  opacity: .09; color: var(--fz-gold, #F5C842); pointer-events: none; z-index: 0; line-height: 0;
}

/* ── left medal (58px) ── */
#fz-minigames-card .mg3-medal { position: relative; width: 58px; height: 58px; flex: 0 0 auto; z-index: 2; }
#fz-minigames-card .mg3-medal::before {   /* outer glow */
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 200, 66, 0.5), rgba(245, 200, 66, 0.1) 60%, transparent 75%);
  filter: blur(8px);
}
#fz-minigames-card .mg3-ring {            /* rotating sheen ring */
  position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 214, 74, 0), rgba(255, 240, 184, .8), rgba(255, 214, 74, 0) 55%);
  filter: blur(3px);
  animation: fzSpinRing 3.6s linear infinite;
}
@keyframes fzSpinRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
#fz-minigames-card .mg3-rim {             /* brass conic rim */
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, #8A6410, #FFE9A8 14%, #C79517 30%, #8A6410 46%, #FFF3C4 60%, #B8860B 76%, #8A6410);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
#fz-minigames-card .mg3-face {            /* coin face */
  position: absolute; inset: 3px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, #FFF3C4, #F5C842 42%, #C79517 72%, #9A7112);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.7), inset 0 -4px 7px rgba(90, 58, 6, 0.55);
  color: #7A5308;
}
#fz-minigames-card .mg3-face svg { filter: drop-shadow(0 1px 0 rgba(255, 243, 196, 0.8)); }
#fz-minigames-card .mg3-count {           /* green game-count badge */
  position: absolute; top: -4px; right: -6px; z-index: 3;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-size: 10px; font-weight: 800; color: #04230F;
  background: linear-gradient(180deg, #4EF09A, #1ED571 55%, #0F7A40);
  border: 1.5px solid #07080d;
  box-shadow: 0 0 10px rgba(30, 213, 113, 0.6);
}

/* ── middle copy ── */
#fz-minigames-card .mg3-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; position: relative; z-index: 2; }
#fz-minigames-card .mg3-titlerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#fz-minigames-card .mg3-title {
  font-family: var(--fz-font-display, 'Oswald', sans-serif);
  font-size: 18px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(180deg, #FFFFFF 20%, #FFE9A8 70%, #F5C842);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 8px rgba(245, 200, 66, 0.35));
}
#fz-minigames-card .mg3-free {
  font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px; color: #04230F;
  background: linear-gradient(180deg, #4EF09A, #1ED571 55%, #0F7A40);
  box-shadow: 0 0 10px rgba(30, 213, 113, 0.5);
}
#fz-minigames-card .mg3-sub {
  font-size: 11px; color: var(--fz-text-2, #A6B0BC);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#fz-minigames-card .mg3-sub b {
  font-family: var(--fz-font-mono, ui-monospace, monospace);
  font-weight: 800; color: var(--fz-gold, #F5C842);
}
#fz-minigames-card .mg3-pearlrow { display: flex; align-items: center; gap: 8px; }
#fz-minigames-card .mg3-pearls { display: flex; align-items: center; gap: 4px; }
#fz-minigames-card .mg3-pearl { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
#fz-minigames-card .mg3-inside {
  font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fz-text-3, #6E7B88); white-space: nowrap;
}

/* ── right CTA pill ── */
#fz-minigames-card .mg3-cta {
  position: relative; z-index: 2; flex: 0 0 auto;
  height: 38px; padding: 0 18px; border-radius: 999px;
  display: flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fz-on-gold, #14110A);
  background: linear-gradient(180deg, #FFE082 0%, #F5C842 45%, #C08E1A 100%);
  animation: fzCtaPulse 2.4s ease-in-out infinite;
}
@keyframes fzCtaPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(245, 200, 66, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
  50% { box-shadow: 0 0 30px rgba(245, 200, 66, .65), inset 0 1px 0 rgba(255, 255, 255, .4); }
}
#fz-minigames-card .mg3-cta-short { display: none; }

/* ── mobile <980 ── */
@media (max-width: 979px) {
  html body #fz-minigames-card { gap: 12px; padding: 14px; min-height: 64px; }
  #fz-minigames-card .mg3-medal { width: 48px; height: 48px; }
  #fz-minigames-card .mg3-title { font-size: 16px; }
  #fz-minigames-card .mg3-cta { height: 34px; padding: 0 14px; }
  #fz-minigames-card .mg3-cta-full { display: none; }
  #fz-minigames-card .mg3-cta-short { display: inline; }
  #fz-minigames-card .mg3-wm { right: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  #fz-minigames-card .mg3-ring, #fz-minigames-card .mg3-shimmer, #fz-minigames-card .mg3-beam,
  #fz-minigames-card .mg3-spark, #fz-minigames-card .mg3-cta { animation: none !important; }
}