/* =============================================================
   GG GAME-Y DESIGN SYSTEM — shared tokens, sprites, utilities
   Consumed by: wpgp-events, wpgp-points-shop, wp-gamification
   ============================================================= */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  /* Radii */
  --gg-radius:     14px;
  --gg-radius-sm:  10px;
  --gg-radius-pill: 999px;

  /* Easing */
  --gg-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* springy pop  */
  --gg-ease:   cubic-bezier(0.22, 1,    0.36, 1);  /* smooth settle */

  /* Durations */
  --gg-dur-fast: 0.18s;
  --gg-dur:      0.3s;

  /* Shadows — warm tint via amber undertone */
  --gg-shadow-sm: 0 1px 3px rgba(60, 30, 0, 0.10),
                  0 1px 2px rgba(60, 30, 0, 0.06);
  --gg-shadow:    0 4px 8px rgba(60, 30, 0, 0.10),
                  0 2px 4px rgba(60, 30, 0, 0.07),
                  0 1px 2px rgba(60, 30, 0, 0.05);
  --gg-shadow-lg: 0 12px 28px rgba(60, 30, 0, 0.13),
                  0  6px 14px rgba(60, 30, 0, 0.09),
                  0  2px  4px rgba(60, 30, 0, 0.06);

  /* Fire palette */
  --gg-fire-outer: #ff9600;
  --gg-fire-mid:   #ffc800;
  --gg-fire-core:  #fff7e0;

  /* Currency */
  --gg-gold: #f4a900;
  --gg-emerald: #0e9f6e;

  /* Display font — bold, premium (enqueued in functions.php) */
  --gg-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
}

/* ── LearnDash focus-mode bar typography ───────────────────── */
.learndash-wrapper .ld-focus-header {
  font-family: var(--gg-font-display);
}
.learndash-wrapper .ld-focus-header .ld-focus-mode-course-heading-wrapper,
.learndash-wrapper .ld-focus-header .ld-focus-mode-course-heading-wrapper * {
  font-family: var(--gg-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Space Grotesk caps at 700 — stroke fakes ~850 */
  -webkit-text-stroke: 0.015em currentColor;
  paint-order: stroke fill;
}
.learndash-wrapper .ld-focus-header .ld-user-menu {
  font-family: var(--gg-font-display);
  font-weight: 500;
}


/* ── 2. FIRE SPRITE ─────────────────────────────────────────── */
/*
CANONICAL FIRE SVG — copy verbatim into plugins:

<svg class="gg-fire" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <path class="gg-fire__outer" d="M12 2 C12 2 9 5.5 8 8.5 C7.2 10.8 7.5 12.5 7.5 12.5 C6.2 11.4 5.8 9.4 6 7.5 C4.2 9.5 3 12 3 14.5 C3 18.6 7 22 12 22 C17 22 21 18.6 21 14.5 C21 10 17.5 6.5 15 4.5 C15.2 6 14.8 7.5 14 8.5 C14 8.5 13.5 5 12 2 Z"/>
  <path class="gg-fire__mid" d="M12 8 C12 8 10.2 10.5 9.5 12.5 C9 14 9.2 15.5 10 16.5 C9.5 15.5 9.6 14.2 10.2 13.2 C10.2 13.2 10.5 15 12 16 C13.5 15 13.8 13.2 13.8 13.2 C14.4 14.2 14.5 15.5 14 16.5 C14.8 15.5 15 14 14.5 12.5 C13.8 10.5 12 8 12 8 Z"/>
  <path class="gg-fire__core" d="M12 15 C11.2 15 10.5 15.5 10.5 16.2 C10.5 17.2 11.2 18 12 18 C12.8 18 13.5 17.2 13.5 16.2 C13.5 15.5 12.8 15 12 15 Z"/>
</svg>
*/

/* Fire fills */
.gg-fire__outer { fill: var(--gg-fire-outer); }
.gg-fire__mid   { fill: var(--gg-fire-mid);   }
.gg-fire__core  { fill: var(--gg-fire-core);  }

/* Per-layer flicker keyframes — independent rhythms */
@keyframes gg-flicker-a {
  from { transform: scaleY(1.00) skewX( 0deg); }
  to   { transform: scaleY(1.07) skewX(-2deg); }
}
@keyframes gg-flicker-b {
  from { transform: scaleY(0.96) skewX( 1.5deg); }
  to   { transform: scaleY(1.05) skewX(-1.5deg); }
}
@keyframes gg-flicker-c {
  from { transform: scaleY(0.94) skewX(-1deg); }
  to   { transform: scaleY(1.08) skewX( 2deg); }
}

.gg-fire__outer {
  transform-box:    fill-box;
  transform-origin: 50% 100%;
  animation: gg-flicker-a 1.10s ease-in-out infinite alternate;
}
.gg-fire__mid {
  transform-box:    fill-box;
  transform-origin: 50% 100%;
  animation: gg-flicker-b 0.85s ease-in-out infinite alternate;
  animation-delay: -0.3s;
}
.gg-fire__core {
  transform-box:    fill-box;
  transform-origin: 50% 100%;
  animation: gg-flicker-c 0.60s ease-in-out infinite alternate;
  animation-delay: -0.15s;
}


/* ── 3. GEM SPRITE ──────────────────────────────────────────── */
/*
CANONICAL GEM SVG — copy verbatim into plugins:

<svg class="gg-gem" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <g class="gg-gem__body">
    <polygon fill="currentColor" points="7,5 17,5 20,8 20,16 17,19 7,19 4,16 4,8"/>
    <polygon fill="#000000" opacity="0.22" points="20,8 20,16 17,19 7,19 8.5,17 15.5,17 18,14.5 18,9.5"/>
    <polygon fill="#ffffff" opacity="0.28" points="4,8 7,5 17,5 15.5,7 8.5,7 6,9.5"/>
    <polygon fill="#ffffff" opacity="0.14" points="8.5,7 15.5,7 18,9.5 18,14.5 15.5,17 8.5,17 6,14.5 6,9.5"/>
    <polygon fill="#000000" opacity="0.10" points="9.5,9 14.5,9 16,10.5 16,13.5 14.5,15 9.5,15 8,13.5 8,10.5"/>
    <polygon fill="#ffffff" opacity="0.35" points="9.5,9 14.5,9 13.5,10.2 10.5,10.2"/>
    <path fill="none" stroke="#ffffff" stroke-width="0.5" opacity="0.35" d="M7 5 L9.5 9 M17 5 L14.5 9 M20 8 L16 10.5 M20 16 L16 13.5 M17 19 L14.5 15 M7 19 L9.5 15 M4 16 L8 13.5 M4 8 L8 10.5"/>
  </g>
  <polygon class="gg-shine-ring" pathLength="100" points="7,5 17,5 20,8 20,16 17,19 7,19 4,16 4,8"/>
  <path    class="gg-gem__sparkle" fill="currentColor" d="M20 2.5 L20.5 4 L22 4.5 L20.5 5 L20 6.5 L19.5 5 L18 4.5 L19.5 4 Z"/>
</svg>

Step-cut emerald: facet shading is inline white/black overlays over a
currentColor base, so one color tints the whole stone (same-color-at-lower-
opacity over itself is invisible). Root class/anim classes unchanged so all
existing .gg-gem CSS keeps working.

CANONICAL COIN SVG (VOA currency) — copy verbatim into plugins:

<svg class="gg-coin" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
  <circle fill="currentColor" cx="12" cy="12" r="10"/>
  <circle fill="#000000" opacity="0.18" cx="12" cy="12" r="10"/>
  <circle fill="currentColor" cx="12" cy="11.2" r="9.2"/>
  <circle fill="none" stroke="#ffffff" opacity="0.45" stroke-width="0.7" stroke-dasharray="1.2 1.1" cx="12" cy="11.2" r="8"/>
  <text class="gg-coin__label" x="12" y="13.6" text-anchor="middle" font-size="6" font-weight="900" fill="#7a4a00" style="font-family: var(--gg-font-display, sans-serif)">VOA</text>
  <circle class="gg-shine-ring" pathLength="100" cx="12" cy="11.2" r="9.2"/><path class="gg-gem__sparkle" fill="currentColor" d="M20 2.5 L20.5 4 L22 4.5 L20.5 5 L20 6.5 L19.5 5 L18 4.5 L19.5 4 Z"/>
</svg>
*/

/* Doubled-class selectors: beat any stale copy of the old canon (e.g. a
   leftover themed style.css) that styled these at single-class specificity */
.gg-coin.gg-coin { color: var(--gg-gold, #f4a900); }
.gg-coin__label { pointer-events: none; user-select: none; }

/* Currency tints — VIP is the emerald green; --voa kept for stragglers */
.gg-gem.gg-gem--voa { color: #751f3d; }
.gg-gem.gg-gem--vip { color: var(--gg-emerald, #0e9f6e); }
img.gg-gem { object-fit: contain; }

/* Shine: bright arc orbiting the icon's border (pathLength=100 normalizes
   both the coin circle and the emerald octagon to the same dash math) */
.gg-coin .gg-shine-ring,
.gg-gem .gg-shine-ring {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 12 88;
  opacity: 0;
  animation: gg-ring-orbit 3.2s linear infinite;
}
/* ~0.2s flash lap, then ~3s dark break — too fast to track, reads as a glint */
@keyframes gg-ring-orbit {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  1%   { opacity: 1; }
  5%   { opacity: 1; }
  6%   { stroke-dashoffset: -100; opacity: 0; }
  100% { stroke-dashoffset: -100; opacity: 0; }
}

/* Sparkle: 4-point star top-right (doubled selector beats stale theme copy) */
.gg-gem .gg-gem__sparkle,
.gg-coin .gg-gem__sparkle {
  fill: currentColor;
  opacity: 0;
  transform: scale(0);
  transform-box:    fill-box;
  transform-origin: 50% 50%;
  animation: gg-gem-sparkle 3.2s ease-in-out infinite;
  animation-delay: 0.12s;   /* pops right as the flash lap lands */
}
@keyframes gg-gem-sparkle {
  0%   { opacity: 0; transform: scale(0);   }
  10%  { opacity: 1; transform: scale(1);   }
  22%  { opacity: 0; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(0);   }
}


/* ── 4. SIZING + UTILITIES ──────────────────────────────────── */
.gg-fire,
.gg-gem,
.gg-coin {
  width:          1em;
  height:         1em;
  vertical-align: -0.125em;
  display:        inline-block;
}

.gg-16 { width: 16px; height: 16px; }
.gg-24 { width: 24px; height: 24px; }
.gg-32 { width: 32px; height: 32px; }
.gg-48 { width: 48px; height: 48px; }

.gg-coin.gg-32, .gg-gem.gg-32, .gg-coin.gg-48, .gg-gem.gg-48 { vertical-align: middle; }

@keyframes gg-pop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1);    }
}
.gg-pop { animation: gg-pop var(--gg-dur) var(--gg-spring); }


/* ── 5. REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gg-fire path,
  .gg-shine-ring,
  .gg-gem__sparkle,
  .gg-pop {
    animation: none !important;
  }
  .gg-gem__sparkle {
    opacity: 0;
  }
  .gg-shine-ring {
    opacity: 0.25;   /* static subtle edge highlight */
  }
}