/* ════════════════════════════════════════════════════════════════════
   CANVASS PRO · gamify.css  ->  window.Gamify
   The gamification surfaces, milled: streaks, badges, the season arc, the
   podium leaderboard, and the personal "You" hub. TOKEN-ONLY. The only
   energy colors (tier hues, flame core, badge marks, rank emblems, the
   confetti shards, the combo gold) arrive at runtime as --c (and friends)
   via inline style from gamify.js, exactly like the disposition --c and the
   storm hailColor patterns. They are FIELD LANGUAGE, not decoration, so they
   never live as raw hex in this file. Every other value is a token from
   ../assets/tokens.css.

   The law of this file: the base stays the instrument. Saturation, spring,
   and bloom appear only inside a reward surface (the flame, an emblem, a
   badge, a podium crown, the You hub). Glow and gradient are allowed only
   there, and the You hub is the one surface permitted to feel warm and rich,
   because it is the trophy room. Everything degrades to instant under
   prefers-reduced-motion, the reward still registers, it just does not fly.
   ════════════════════════════════════════════════════════════════════ */

/* a knocked-out ink that reads on a saturated tier coin in both themes,
   kept as rgb() keywords so the stylesheet stays free of raw hex (same
   discipline as pins.css --pin-ink). */
:root { --gm-ink: rgb(244, 244, 248); }
@media (prefers-color-scheme: light) { :root { --gm-ink: rgb(255, 255, 255); } }

/* ════════════════════════════════════════════════════════════════════
   1 · THE FLAME  ·  a bespoke vector, sized + hued inline by JS.
   Sits in the HUD, the You hub, and as a tab badge. The heat-core gradient
   is a small contained glyph (field language), not a surface glow.
   ════════════════════════════════════════════════════════════════════ */
.gm-flame { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.gm-flame svg { display: block; overflow: visible; }
.gm-flame .gf-outer { fill: var(--c, var(--ember)); }
.gm-flame .gf-inner { fill: var(--c2, var(--ember-hi)); }
.gm-flame .gf-core  { fill: var(--c3, var(--ember-hi)); opacity: .9; }
/* on-fire: the flame breathes a single, slow heat pulse */
.gm-flame.on-fire { animation: gmFlameBreathe 1.6s var(--ease) infinite; transform-origin: 50% 90%; }
@keyframes gmFlameBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.gm-flame.cold { opacity: .42; filter: grayscale(.55); }
@media (prefers-reduced-motion: reduce) { .gm-flame.on-fire { animation: none; } }

/* ════════════════════════════════════════════════════════════════════
   2 · THE PODIUM LEADERBOARD  ·  from a list to a stage.
   Top-3 on pedestals (2-1-3), animated rank bars below, a "you" row pinned
   ember, rank-movement markers. Bars grow from 0 on open.
   ════════════════════════════════════════════════════════════════════ */
.gm-board { display: flex; flex-direction: column; gap: 14px; }

.gm-podium {
  display: grid; grid-template-columns: 1fr 1.14fr 1fr; align-items: end;
  gap: 8px; padding: 6px 2px 0;
}
.gm-ped { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.gm-ped .gm-av { margin-bottom: 1px; }
.gm-ped-name {
  font-size: 11px; font-weight: 700; color: var(--platinum);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.gm-ped-sub { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--plat-dim); text-transform: uppercase; }
.gm-ped-bar {
  width: 100%; border-radius: var(--r-chip) var(--r-chip) 0 0;
  background: var(--graphite); border: 1px solid var(--line); border-bottom: none;
  box-shadow: var(--e-inset);
  position: relative; display: flex; align-items: flex-start; justify-content: center;
  /* grows from 0 -> --h on open. Clip with clip-path, not overflow:hidden,
     so the growing content still clips at the sides/bottom while the crown
     (top:-16px, inside this bar) can ride above the top edge. */
  height: 0; clip-path: inset(-20px 0 0 0);
  transition: height 520ms var(--ease-exit);
}
.gm-board.armed .gm-ped-bar { height: var(--h); }
.gm-ped-1 .gm-ped-bar { background: color-mix(in srgb, var(--ember) 12%, var(--graphite)); border-color: color-mix(in srgb, var(--ember) 40%, var(--line)); }
.gm-ped-num { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--plat-dim); padding-top: 6px; }
.gm-ped-1 .gm-ped-num { color: var(--ember); }
/* the rank-1 crown: a subtle bloom that is the ONE allowed persistent glow,
   contained to the winner's coin */
.gm-crown { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); color: var(--ember); line-height: 0; }
.gm-crown svg { filter: drop-shadow(var(--glow-ember)); }
@media (prefers-reduced-motion: reduce) { .gm-board .gm-ped-bar { transition: none; height: var(--h); } }

/* an initials avatar coin, tier-hued via --c inline */
.gm-av {
  width: var(--s, 36px); height: var(--s, 36px); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 800; letter-spacing: .02em;
  font-size: calc(var(--s, 36px) * .36); color: var(--gm-ink);
  background: color-mix(in srgb, var(--c, var(--trust)) 88%, var(--obsidian));
  border: 1.5px solid color-mix(in srgb, var(--c, var(--trust)) 60%, var(--line-hi));
  box-shadow: var(--e-inset);
  flex: none;
}
.gm-av.you { box-shadow: var(--e-inset), 0 0 0 2px color-mix(in srgb, var(--ember) 55%, transparent); }

/* the ranked rows below the podium */
.gm-rows { display: flex; flex-direction: column; gap: 5px; }
.gm-row {
  display: grid; grid-template-columns: 22px auto 1fr auto; align-items: center;
  gap: 9px; padding: 7px 9px; border-radius: var(--r-control);
  background: var(--tint-row); border: 1px solid transparent;
  transition: background var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.gm-row:hover { background: var(--graphite-3); border-color: var(--line); }
.gm-row.you { background: var(--tint-ember); border-color: color-mix(in srgb, var(--ember) 32%, var(--line)); box-shadow: var(--e-inset); }
.gm-row.you:hover { background: var(--tint-ember-2); }
.gm-row .gm-rk { font-family: var(--mono); font-size: 12px; color: var(--plat-dim); text-align: center; }
.gm-row.you .gm-rk { color: var(--ember); }
.gm-row .gm-nm { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gm-row .gm-nm strong { font-size: 12.5px; font-weight: 600; color: var(--platinum); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-row .gm-nm .gm-rank-name { font-family: var(--mono); font-size: 9px; letter-spacing: .04em; color: var(--plat-dim); text-transform: uppercase; }
.gm-row .gm-track { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; min-width: 40px; }
.gm-row .gm-track > i {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c, var(--trust)) 80%, var(--plat-dim));
  width: 0; transition: width 520ms var(--ease-exit); transition-delay: var(--d, 0ms);
}
.gm-row.you .gm-track > i { background: var(--grad-ember); }
.gm-board.armed .gm-row .gm-track > i { width: var(--w, 0%); }
.gm-row .gm-xp { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--platinum); text-align: right; white-space: nowrap; }

/* the up/down rank-movement marker on a row */
.gm-move { display: inline-flex; align-items: center; gap: 2px; font-family: var(--mono); font-size: 9px; margin-left: 5px; }
.gm-move.up { color: var(--green); }
.gm-move.dn { color: var(--plat-faint); }
.gm-move svg { line-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .gm-row { transition: none; }
  .gm-row .gm-track > i { transition: none; }
  .gm-board.armed .gm-row .gm-track > i { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
   3 · THE BADGES GRID  ·  bespoke vector marks, tier-hued via --c inline.
   Earned read in their hue; locked read as a dim glyph-ghost so the rep
   sees what is next.
   ════════════════════════════════════════════════════════════════════ */
.gm-badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (max-width: 420px) { .gm-badges { grid-template-columns: repeat(3, 1fr); } }
.gm-badge {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 11px 6px 9px; border-radius: var(--r-card);
  background: var(--graphite); border: 1px solid var(--line);
  box-shadow: var(--e2), var(--e-inset);
  text-align: center; cursor: default;
  transition: border-color var(--m-fast) var(--ease), box-shadow var(--m-base) var(--ease), background var(--m-fast) var(--ease), transform var(--m-fast) var(--ease-spring);
}
.gm-badge.locked { background: var(--graphite-2); box-shadow: var(--e-inset); }
.gm-badge.earned { border-color: color-mix(in srgb, var(--c) 38%, var(--line)); }
.gm-badge.earned:hover { transform: translateY(-2px); background: var(--graphite-3); box-shadow: var(--e3), var(--e-inset); border-color: color-mix(in srgb, var(--c) 60%, var(--line-hi)); }
.gm-badge-mark { width: 38px; height: 38px; line-height: 0; }
.gm-badge-mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gm-badge.earned .gm-badge-mark { color: var(--c); }
.gm-badge.locked .gm-badge-mark { color: var(--plat-faint); opacity: .42; }
.gm-badge-name {
  font-size: 10px; font-weight: 600; line-height: 1.2;
  color: var(--platinum); max-width: 100%;
}
.gm-badge.locked .gm-badge-name { color: var(--plat-dim); }
.gm-badge-crit { font-family: var(--mono); font-size: 9.5px; letter-spacing: .03em; color: var(--plat-faint); text-transform: uppercase; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .gm-badge { transition: none; } .gm-badge.earned:hover { transform: none; } }

/* ════════════════════════════════════════════════════════════════════
   4 · THE "YOU" HUB  ·  the trophy room. The one surface allowed warmth.
   Renders into the You tab root (full screen on mobile) or a docked sheet.
   ════════════════════════════════════════════════════════════════════ */
.gm-you { display: flex; flex-direction: column; gap: 16px; }

.gm-you-head { display: flex; align-items: center; gap: 13px; }
.gm-emblem { width: 60px; height: 60px; line-height: 0; flex: none; color: var(--c, var(--ember)); }
.gm-emblem svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gm-you-head .gm-id { min-width: 0; flex: 1; }
.gm-you-head .gm-id .gm-rankname { font-family: var(--disp); font-size: 16px; letter-spacing: .02em; color: var(--platinum); line-height: 1.1; }
.gm-you-head .gm-id .gm-lvl { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--c, var(--ember)); text-transform: uppercase; margin-top: 3px; }
.gm-xpbar { margin-top: 7px; height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.gm-xpbar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-ember); width: 0; transition: width 620ms var(--ease-exit); }
.gm-you.armed .gm-xpbar > i { width: var(--pct, 0%); }
.gm-you-head .gm-tonext { font-family: var(--mono); font-size: 9.5px; color: var(--plat-dim); margin-top: 5px; }
@media (prefers-reduced-motion: reduce) { .gm-you .gm-xpbar > i { transition: none; width: var(--pct, 0%); } }

/* a titled block in the hub */
.gm-block { display: flex; flex-direction: column; gap: 9px; }
.gm-block-h {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--plat-dim);
}
.gm-block-h .gm-block-n { color: var(--plat-faint); }

/* the streak block */
.gm-streak {
  display: flex; align-items: center; gap: 13px;
  padding: var(--pad-card); border-radius: var(--r-card);
  background: var(--graphite); border: 1px solid var(--line);
  box-shadow: var(--e2), var(--e-inset);
}
.gm-streak .gm-flame { width: 44px; flex: none; }
.gm-streak-txt { min-width: 0; }
.gm-streak-big { font-family: var(--disp); font-size: 15px; color: var(--platinum); line-height: 1.1; }
.gm-streak-big .gm-streak-n { color: var(--c, var(--ember)); }
.gm-streak-sub { font-family: var(--mono); font-size: 10px; color: var(--plat-dim); margin-top: 4px; }
.gm-streak-nudge { font-size: 11px; color: var(--ember); margin-top: 5px; font-weight: 600; }
/* the warm heartbeat: a 1px ember underline only when a day streak is live */
.gm-streak.live { border-bottom-color: color-mix(in srgb, var(--ember) 55%, var(--line)); }

/* the season block */
.gm-season {
  padding: var(--pad-card); border-radius: var(--r-card);
  background: var(--graphite); border: 1px solid var(--line);
  box-shadow: var(--e2), var(--e-inset);
}
.gm-season-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gm-season-name { font-size: 13px; font-weight: 700; color: var(--platinum); }
.gm-season-end { font-family: var(--mono); font-size: 10px; color: var(--ember); white-space: nowrap; }
.gm-season-bar { margin-top: 10px; height: 7px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; position: relative; }
.gm-season-bar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-ember); width: 0; transition: width 620ms var(--ease-exit); }
.gm-you.armed .gm-season-bar > i { width: var(--spct, 0%); }
/* season tier pips along the bar */
.gm-season-pip { position: absolute; top: 50%; width: 2px; height: 9px; margin-top: -4.5px; background: var(--obsidian); opacity: .55; border-radius: 1px; }
.gm-season-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.gm-season-meta .gm-season-tier { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--plat-dim); text-transform: uppercase; }
.gm-season-meta .gm-season-cos { font-family: var(--mono); font-size: 9.5px; color: var(--ember); }
@media (prefers-reduced-motion: reduce) { .gm-you .gm-season-bar > i { transition: none; width: var(--spct, 0%); } }

/* the headline stats */
.gm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm-stat {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 10px;
  border-radius: var(--r-card); background: var(--graphite); border: 1px solid var(--line);
  box-shadow: var(--e2), var(--e-inset);
}
.gm-stat-n { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--platinum); line-height: 1; }
.gm-stat-k { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--plat-dim); }
.gm-stat.gold .gm-stat-n { color: var(--ember); }

/* the one earned upsell, when not Pro. Uses the existing Pro modal path. */
.gm-upsell {
  display: flex; align-items: center; gap: 11px;
  padding: var(--pad-card); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--ember) 7%, var(--graphite));
  border: 1px solid color-mix(in srgb, var(--ember) 30%, var(--line));
  box-shadow: var(--e2), var(--e-inset);
}
.gm-upsell .gm-upsell-txt { flex: 1; min-width: 0; }
.gm-upsell .gm-upsell-txt strong { display: block; font-size: 12.5px; color: var(--platinum); }
.gm-upsell .gm-upsell-txt span { font-family: var(--mono); font-size: 9.5px; color: var(--plat-dim); }
.gm-upsell .gm-upsell-go {
  flex: none; padding: 8px 14px; border-radius: var(--r-control);
  background: var(--grad-ember); color: var(--ember-ink);
  box-shadow: var(--e2);
  font-weight: 700; font-size: 12px; border: none; cursor: pointer;
  transition: transform var(--m-press) var(--ease-press), box-shadow var(--m-fast) var(--ease);
}
.gm-upsell .gm-upsell-go:focus-visible { outline: none; box-shadow: var(--ring-ember); }
.gm-upsell .gm-upsell-go:active { transform: translateY(1px) scale(.96); box-shadow: var(--e-press); }
@media (prefers-reduced-motion: reduce) { .gm-upsell .gm-upsell-go:active { transform: none; } }

/* ════════════════════════════════════════════════════════════════════
   5 · IN-HUD CHIPS  ·  the flame + day-streak pill the integrator can drop
   into the Run HUD next to the rank chip. Token-only chrome; the flame's
   hue is inline.
   ════════════════════════════════════════════════════════════════════ */
.gm-streak-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 5px; border-radius: var(--r-pill);
  background: var(--graphite); border: 1px solid var(--line);
  box-shadow: var(--e1);
  vertical-align: middle;
}
.gm-streak-chip.live { border-color: color-mix(in srgb, var(--ember) 40%, var(--line)); background: var(--tint-ember); }
.gm-streak-chip .gm-flame { width: 18px; }
.gm-streak-chip .gm-sc-n { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--platinum); }
.gm-streak-chip .gm-sc-k { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; color: var(--plat-dim); text-transform: uppercase; }