/* ==================================================================
   Growth journey — living, themed scenes (markup: growth-scenes.js,
   engine: app.js mountGrowthScene).

   The engine sets on .gj-stage:
     data-theme="tree|chicken|butterfly|rocket|castle|diamond"
     data-stage="none|0..7"  + classes .none  .ge0…ge7 (stage ≥ n)  .eq0…eq7 (stage = n)
     .dormant (no new video for a while)
     --gj-p   overall progress 0..1
     --gj-sp  progress inside the current stage 0..1
     .watering (one-shot, each logged video) · .leveling (stage-up)
   Micro steps (.mc, see growth-scenes.js) get .on when revealed and .pop
   for the one a new video just added.
   Only transform / opacity animate. Anything moved by CSS never has a
   transform="" attribute in the markup (CSS would replace it).
   ================================================================== */

/* ---------- card chrome ---------- */
.growth-journey {
  position: relative;
  margin-top: 18px;
  padding: 16px 14px 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 50px -30px rgba(52, 211, 153, 0.45);
  overflow: hidden;
  isolation: isolate;
}
.growth-journey.is-complete {
  border-color: rgba(253, 230, 138, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px -26px rgba(245, 158, 11, 0.55);
}
.gj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gj-kicker { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px; font-size: 11.5px; font-weight: 800; color: #6ee7b7; flex-wrap: wrap; }
.gj-theme-name {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 10.5px;
  font-weight: 700;
}
.gj-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-dim); line-height: 1.6; }
.gj-sub { margin: 3px 0 0; font-size: 11px; line-height: 1.75; color: var(--text-dim); opacity: 0.85; }
.gj-sub b { color: #6ee7b7; }
.gj-counter {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 3px;
  padding: 7px 12px 6px;
  border-radius: 16px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.28);
  flex-shrink: 0;
  text-align: center;
}
.gj-count { font-size: 22px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.gj-count-of { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.gj-count-unit { grid-column: 1 / -1; font-size: 9.5px; color: #6ee7b7; font-weight: 700; margin-top: 3px; }

.gj-stage {
  --gj-p: 0;
  --gj-sp: 0;
  --gj-stem: 0;
  --gj-trunk: 0;
  --gj-canopy: 0;
  --gj-aura: #7c3aed;
  --gj-mote: #a78bfa;
  --gj-halo: #fde68a;
  position: relative;
  margin: 12px -14px 0;
  height: 212px;
  overflow: hidden;
}
.gj-aura {
  position: absolute;
  inset: -20% -10% 10%;
  z-index: -1;
  color: var(--gj-aura);
  background: radial-gradient(ellipse 55% 60% at 50% 45%, currentColor, transparent 70%);
  opacity: 0.32;
  transition: color 1.2s ease;
  animation: auraBreathe 6s ease-in-out infinite;
}
@keyframes auraBreathe { 0%, 100% { opacity: 0.26; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.06); } }
.gj-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gj-stage.pre-reveal .gj-svg { opacity: 0.001; }

/* ---------- theme palettes (motes, halo, level-up accents) ---------- */
.gj-stage[data-theme="tree"] { --gj-aura: #22c55e; --gj-mote: #bef264; --gj-halo: #fde68a; }
.gj-stage[data-theme="tree"].ge6 { --gj-mote: #fbcfe8; }
.gj-stage[data-theme="tree"].ge7 { --gj-aura: #f59e0b; --gj-mote: #fde68a; }
.gj-stage[data-theme="chicken"] { --gj-aura: #f59e0b; --gj-mote: #fde68a; --gj-halo: #fde68a; }
.gj-stage[data-theme="butterfly"] { --gj-aura: #d946ef; --gj-mote: #f5d0fe; --gj-halo: #f0abfc; }
.gj-stage[data-theme="rocket"] { --gj-aura: #2563eb; --gj-mote: #bfdbfe; --gj-halo: #fdba74; }
.gj-stage[data-theme="castle"] { --gj-aura: #8b5cf6; --gj-mote: #c4b5fd; --gj-halo: #fde68a; }
.gj-stage[data-theme="diamond"] { --gj-aura: #0891b2; --gj-mote: #a5f3fc; --gj-halo: #e0f2fe; }
.gj-stage.none { --gj-aura: #6d28d9; }

/* ---------- living world: sky warms up with every video ---------- */
.gj-sky-d, .gj-sky-g, .gj-night-stars, .rk-dawn { transition: opacity 1.4s ease; }
.gj-sky-d { opacity: clamp(0, calc(var(--gj-p) * 1.6), 1); }
.gj-sky-g { opacity: clamp(0, calc((var(--gj-p) - 0.62) * 2.6), 1); }
.gj-night-stars { opacity: clamp(0, calc(1 - var(--gj-p) * 1.8), 1); }
.gj-night-stars circle { fill: #e0e7ff; animation: starTwinkle 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -0.41s); }
.gj-sun { transform-box: view-box; transform: translateY(calc((1 - var(--gj-p)) * 132px)); transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
.gj-clouds { opacity: calc(0.35 + var(--gj-p) * 0.65); transition: opacity 1.4s ease; }
.gj-cloud { fill: rgba(226, 232, 240, 0.09); animation: cloudDrift var(--t, 80s) linear infinite; animation-delay: var(--d, 0s); }
@keyframes cloudDrift { from { transform: translate(-90px, var(--y, 30px)); } to { transform: translate(450px, var(--y, 30px)); } }
.gj-birds { opacity: 0; transition: opacity 1s ease; }
.gj-stage.ge5 .gj-birds { opacity: 1; animation: birdsFly 19s linear infinite; }
@keyframes birdsFly {
  0% { transform: translate(-70px, 58px); }
  60%, 100% { transform: translate(430px, 18px); }
}
.gj-bird { fill: none; stroke: rgba(10, 14, 30, 0.85); stroke-width: 1.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: birdFlap 0.5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.17s); }
@keyframes birdFlap { from { transform: scaleY(1); } to { transform: scaleY(-0.5); } }

/* ---------- micro steps: one (or a few) new pieces per video ---------- */
.mc {
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: opacity 0.45s ease, transform 0.75s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mc.on { opacity: 1; transform: none; }
.mc.mc-up { transform-origin: 50% 100%; transform: scaleY(0); }
.mc.mc-hang { transform-origin: 50% 0%; }
.mc.mc-drop { transform: translateY(-26px); transition-timing-function: ease, cubic-bezier(0.5, 1.6, 0.6, 1); }
.mc.mc-fade, .mc.mc-draw { transform: none; }
.mc.on.mc-up, .mc.on.mc-drop { transform: none; }
.mc-draw .dr { fill: none; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: inherit; }
.mc-draw.on .dr { stroke-dashoffset: 0; }
/* the piece a new video just added: a little bounce + flash */
.mc.pop:not(.mc-draw):not(.mc-fade) { animation: mcPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.mc.pop.mc-fade { animation: mcFlash 1s ease both; }
@keyframes mcPop { 0% { opacity: 0; transform: scale(0.2); } 55% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: none; } }
@keyframes mcFlash { 0% { opacity: 0; } 40% { opacity: 1; filter: brightness(1.8); } 100% { opacity: 1; } }

/* ---------- going quiet: the scene fades until the next video ---------- */
.gj-svg { transition: filter 1.2s ease, opacity 0.6s ease; }
.gj-stage.dormant .gj-svg { filter: saturate(0.3) brightness(0.75); }
.gj-stage.dormant .gj-motes, .gj-stage.dormant .gj-birds { display: none; }

/* ---------- shared scene layers ---------- */
.gj-rim { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1.2; }
.gj-halo-stop { stop-color: var(--gj-halo); }
.gj-halo { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 1.2s ease; }
.gj-stage.eq7 .gj-halo { opacity: 1; animation: haloPulse 3.6s ease-in-out infinite; }
@keyframes haloPulse { 0%, 100% { transform: scale(0.92); opacity: 0.75; } 50% { transform: scale(1.06); opacity: 1; } }
.gj-sparkle { fill: var(--gj-halo); opacity: 0; transform-box: fill-box; transform-origin: center; }
.gj-stage.eq7 .gj-sparkle { animation: twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.6s); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

.gj-ghost {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gj-stage.none .gj-ghost { animation: ghostPulse 2.4s ease-in-out infinite; }
@keyframes ghostPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }

.gj-mote { fill: var(--gj-mote); opacity: 0; transform-box: fill-box; animation: moteRise var(--t, 6s) ease-in infinite; animation-delay: var(--d, 0s); }
@keyframes moteRise {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(14px, -160px); }
}
.gj-stage.none .gj-mote:nth-child(n + 5) { display: none; }

/* one ripple per logged video, from the scene's focal point */
.gj-ripple { fill: none; stroke: var(--gj-mote); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.gj-stage.watering .gj-ripple { animation: ripple 1s cubic-bezier(0.22, 1, 0.36, 1) 1; }
@keyframes ripple { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(2.4); } }

.gj-burst-dot { fill: var(--gj-mote); opacity: 0; }
.gj-stage.leveling .gj-burst-dot { animation: burst 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s 1; }
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(0.4); }
}

/* level-up banner */
.gj-levelup {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  background: rgba(10, 12, 20, 0.84);
  border: 1px solid color-mix(in srgb, var(--gj-mote) 60%, transparent);
  box-shadow: 0 0 30px -6px var(--gj-mote);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -16px) scale(0.9);
  pointer-events: none;
}
.gj-levelup small { display: block; font-size: 10px; font-weight: 700; color: var(--gj-mote); }
.gj-levelup-icon { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--gj-mote) 22%, transparent); color: var(--gj-mote); }
.gj-levelup-icon .icon { width: 17px; height: 17px; }
.gj-stage.leveling .gj-levelup { animation: levelBanner 2.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes levelBanner {
  0% { opacity: 0; transform: translate(-50%, -16px) scale(0.9); }
  14%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(0.97); }
}

/* free preview of the whole journey */
.gj-preview-btn {
  position: absolute;
  bottom: 10px;
  inset-inline-end: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 9, 15, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.15s ease;
}
.gj-preview-btn .icon { width: 11px; height: 11px; fill: currentColor; }
.gj-preview-btn:active { transform: scale(0.94); }
.gj-preview-btn:disabled { opacity: 0; pointer-events: none; }
.gj-preview-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(8, 9, 15, 0.7);
  border: 1px dashed color-mix(in srgb, var(--gj-mote) 70%, transparent);
  color: var(--gj-mote);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.gj-preview-badge .icon { width: 12px; height: 12px; }

/* Before the first video: the goal, faded — what this journey grows into
   (paint() in app.js; counter, track and nodes stay at 0). */
.gj-stage .gj-scene { transition: opacity 0.6s ease, filter 0.6s ease; }
.gj-stage.is-ghost .gj-scene { opacity: 0.42; filter: saturate(0.55); }
.gj-stage.is-ghost .gj-halo,
.gj-stage.is-ghost .gj-sparkles { opacity: 0.35; }
.gj-ghost-badge {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(8, 9, 15, 0.65);
  border: 1px dashed color-mix(in srgb, var(--gj-mote) 70%, transparent);
  color: var(--gj-mote);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.gj-ghost-badge .icon { width: 12px; height: 12px; }
.gj-stage.is-ghost .gj-ghost-badge { opacity: 1; transform: translate(-50%, 0); }
.growth-journey.is-previewing .gj-preview-badge { opacity: 1; transform: translate(-50%, 0); }
.growth-journey.is-previewing .gj-counter { opacity: 0.45; }
.growth-journey.is-previewing .gj-stage { cursor: pointer; }
.gj-preview-skip { font-weight: 500; opacity: 0.8; }

/* consistency + distance-to-reference chips */
.gj-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.gj-meta:empty { display: none; }
.gj-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); font-size: 10.5px; font-weight: 700; color: var(--text-dim); }
.gj-chip .icon { width: 12px; height: 12px; }
.gj-chip.is-hot { color: #fdba74; border-color: rgba(251, 146, 60, 0.4); background: rgba(251, 146, 60, 0.1); }
.gj-chip.is-cold { color: #93c5fd; border-color: rgba(96, 165, 250, 0.35); background: rgba(96, 165, 250, 0.08); }

/* milestone track — 8 stages, the benchmark one flagged "مرجع" */
.gj-track-wrap { position: relative; margin-top: 18px; }
.gj-track {
  position: absolute;
  top: 15px;
  inset-inline: 6.25%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.gj-track-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(270deg, #22c55e, #2dd4bf, #a78bfa, #fbbf24);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.7);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.gj-nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); position: relative; }
.gj-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.gj-node-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #151826;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.35);
  transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease;
}
.gj-node-dot .icon { width: 15px; height: 15px; }
.gj-node-label { max-width: 100%; font-size: 10.5px; font-weight: 700; color: var(--text-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gj-node-at { font-size: 9.5px; color: rgba(157, 157, 174, 0.75); font-variant-numeric: tabular-nums; }
.gj-node-ref {
  position: absolute;
  top: -15px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(167, 139, 250, 0.16);
  color: #c4b5fd;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 13px;
  white-space: nowrap;
}
.gj-node.reached .gj-node-dot { background: linear-gradient(135deg, #34d399, #0d9488); border-color: transparent; color: #04241a; }
.gj-node.reached .gj-node-label { color: var(--text); }
.gj-node.current .gj-node-dot { transform: scale(1.14); animation: nodePulse 2.2s ease-in-out infinite; }
.gj-node.next .gj-node-dot { border-style: dashed; border-color: rgba(52, 211, 153, 0.6); color: #6ee7b7; }
.gj-node.is-ref .gj-node-dot { border-color: rgba(167, 139, 250, 0.45); }
.gj-node.is-ref.reached .gj-node-dot { background: linear-gradient(135deg, #a78bfa, #6d28d9); color: #fff; }
.gj-node[data-i="7"].reached .gj-node-dot { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #451a03; }
.gj-node[data-i="7"].current .gj-node-dot { animation-name: nodePulseGold; }
@keyframes nodePulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.18), 0 0 18px rgba(52, 211, 153, 0.45); } 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0.08), 0 0 28px rgba(52, 211, 153, 0.75); } }
@keyframes nodePulseGold { 0%, 100% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 0 18px rgba(245, 158, 11, 0.5); } 50% { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.08), 0 0 30px rgba(245, 158, 11, 0.8); } }

.gj-status {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-dim);
}
.gj-status b { color: var(--text); }
.gj-status > .icon { width: 16px; height: 16px; margin-top: 4px; color: #6ee7b7; }
.gj-next { color: #6ee7b7; font-weight: 700; white-space: nowrap; }
.gj-dim { color: var(--text-dim); font-weight: 500; }
.gj-tip, .gj-warn { display: flex; align-items: flex-start; gap: 5px; margin-top: 6px; font-size: 11.5px; line-height: 1.8; }
.gj-tip { color: #c4b5fd; }
.gj-warn { color: #fca5a5; }
.gj-tip .icon, .gj-warn .icon { flex-shrink: 0; width: 13px; height: 13px; margin-top: 4px; }

/* shown once a preview ends for someone who hasn't started: goal + way in */
.gj-status.gj-status-cta {
  align-items: center;
  border-color: color-mix(in srgb, var(--gj-mote, #6ee7b7) 45%, transparent);
  background: color-mix(in srgb, var(--gj-mote, #6ee7b7) 8%, transparent);
  animation: gjCtaIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gj-status-cta > .icon { margin-top: 0; color: var(--gj-mote, #6ee7b7); }
.gj-cta-text { flex: 1; min-width: 0; }
.gj-cta-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #34d399, #0d9488);
  color: #04241a;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.gj-cta-btn:active { transform: scale(0.94); }
@keyframes gjCtaIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* my logged videos */
.gj-videos { margin-top: 10px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); }
.gj-videos summary { list-style: none; display: flex; align-items: center; gap: 7px; padding: 10px 13px; cursor: pointer; font-size: 12.5px; font-weight: 700; }
.gj-videos summary::-webkit-details-marker { display: none; }
.gj-videos summary .faq-chevron { margin-inline-start: auto; }
.gj-videos[open] .faq-chevron { transform: rotate(180deg); }
.gj-videos-count { padding: 1px 7px; border-radius: 999px; background: var(--surface-strong); font-size: 11px; }
.gj-videos ul { list-style: none; margin: 0; padding: 0 13px 10px; display: flex; flex-direction: column; gap: 6px; }
.gj-videos li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.gj-videos a { color: var(--accent-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gj-video-badge { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; background: var(--surface-strong); color: var(--text-dim); }
.gj-video-badge.ok { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; }

.build-hint { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 8px 0 0; font-size: 11px; color: var(--text-dim); text-align: center; }
.build-hint .icon { color: #6ee7b7; }

/* ==================================================================
   THEME: tree — seed · sprout · seedling · roots · sapling · tree ·
   blossom (reference point) · fruit
   ================================================================== */
[data-theme="tree"] .gj-strata path { fill: none; stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; stroke-linecap: round; }
[data-theme="tree"] .gj-seed-wrap { transform-box: view-box; transform-origin: 180px 168px; transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease; }
[data-theme="tree"] .gj-seed { filter: drop-shadow(0 0 6px rgba(253, 230, 138, 0.55)); }
[data-theme="tree"] .gj-ghost-ring { fill: none; stroke: rgba(253, 230, 138, 0.45); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0; transition: opacity 0.4s ease; }
[data-theme="tree"] .gj-mound { opacity: 0; transition: opacity 0.6s ease 0.3s; }
[data-theme="tree"].none .gj-seed-wrap { transform: translateY(-42px); animation: seedFloat 3.2s ease-in-out infinite; }
[data-theme="tree"].none .gj-ghost-ring { opacity: 1; animation: ringSpin 10s linear infinite; transform-box: fill-box; transform-origin: center; }
[data-theme="tree"]:not(.none) .gj-mound { opacity: 1; }
[data-theme="tree"].ge4 .gj-seed-wrap, [data-theme="tree"].ge4 .gj-mound { opacity: 0; }
@keyframes seedFloat { 0%, 100% { transform: translateY(-42px); } 50% { transform: translateY(-50px) rotate(6deg); } }
@keyframes ringSpin { to { transform: rotate(360deg); } }

[data-theme="tree"] .tr-shadow { transform-box: fill-box; transform-origin: center; opacity: calc(0.15 + var(--gj-canopy) * 0.85); transform: scaleX(calc(0.25 + var(--gj-canopy) * 0.75)); transition: transform 1.2s ease, opacity 1.2s ease; }
[data-theme="tree"] .gj-plant { transform-box: view-box; transform-origin: 180px 172px; animation: sway 5.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
[data-theme="tree"] .gj-stem {
  fill: none;
  stroke: url(#gjStem);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--gj-stem));
  transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.8s ease;
}
[data-theme="tree"] .gj-bud { fill: #bbf7d0; filter: drop-shadow(0 0 5px rgba(134, 239, 172, 0.9)); transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; }
[data-theme="tree"].none .gj-bud, [data-theme="tree"].eq0 .gj-bud, [data-theme="tree"].ge4 .gj-stem, [data-theme="tree"].ge4 .gj-bud { opacity: 0; }
[data-theme="tree"] .mc.tr-leaf-mc { transform-origin: 0% 50%; transition-delay: 0.35s; }
[data-theme="tree"] .tr-leaf { transform-box: fill-box; transform-origin: 0% 50%; animation: flutter 3.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.6s); }
[data-theme="tree"] .gj-leaf-body { fill: url(#gjLeaf); }
[data-theme="tree"] .gj-leaf-vein { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 0.8; stroke-linecap: round; }
@keyframes flutter { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(-9deg) scale(1.03); } }
[data-theme="tree"] .gj-roots .dr { stroke: #5eead4; stroke-width: 1.6; stroke-linecap: round; opacity: 0.8; transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 1, 0.36, 1), stroke 1s ease, stroke-width 1s ease; }
[data-theme="tree"] .gj-roots .tr-hair { stroke-width: 1; }
[data-theme="tree"].eq3 .gj-roots { animation: rootPulse 2.6s ease-in-out infinite; }
[data-theme="tree"].ge4 .gj-roots .dr { stroke: #a16207; stroke-width: 2.6; opacity: 0.7; }
@keyframes rootPulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
[data-theme="tree"] .tr-tuft { fill: none; stroke: #4d7c0f; stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: bladeSway 3.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.9s); }
[data-theme="tree"] .gj-trunk {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(var(--gj-trunk)) scaleX(calc(0.55 + var(--gj-trunk) * 0.45));
  opacity: 0;
  transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}
[data-theme="tree"].ge4 .gj-trunk { opacity: 1; }
[data-theme="tree"] .gj-canopy { transform-box: view-box; transform-origin: 180px 116px; transform: scale(var(--gj-canopy)); transition: transform 1.2s cubic-bezier(0.34, 1.3, 0.64, 1); }
[data-theme="tree"] .tr-blob { transform-box: fill-box; transform-origin: center; animation: breathe 4.5s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.7s); }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
[data-theme="tree"] .tr-blossom circle:not([fill]) { fill: #fbcfe8; }
[data-theme="tree"] .tr-blossom { filter: drop-shadow(0 0 3px rgba(251, 207, 232, 0.8)); }
[data-theme="tree"] .tr-fruit { transform-box: fill-box; transform-origin: 50% 0%; animation: fruitBob 3s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.5s); }
@keyframes fruitBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(1.5px) rotate(4deg); } }
[data-theme="tree"] .gj-drops path { fill: #67e8f9; opacity: 0; }
[data-theme="tree"].eq1 .gj-drops path { animation: dropFall 2.6s ease-in infinite; animation-delay: calc(var(--i) * 0.55s); }
[data-theme="tree"].watering .gj-drops path { animation: dropFall 0.9s ease-in 1; animation-delay: calc(var(--i) * 0.14s); }
@keyframes dropFall {
  0% { opacity: 0; transform: translateY(0); }
  15%, 80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(150px) scaleY(0.6); }
}

/* ==================================================================
   THEME: chicken — egg · warmth · cracks · beak · chick · feathers ·
   hen (reference point) · golden eggs
   ================================================================== */
[data-theme="chicken"] .ck-blade { fill: none; stroke: #4d7c0f; stroke-width: 2; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: bladeSway 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.6s); }
@keyframes bladeSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
[data-theme="chicken"] .ck-straw path, [data-theme="chicken"] .ck-bit { fill: none; stroke: #a16207; stroke-width: 1.5; stroke-linecap: round; opacity: 0.9; }
[data-theme="chicken"] .ck-down { fill: #fde6c4; opacity: 0.92; }
[data-theme="chicken"] .ck-ghost { stroke: rgba(253, 230, 138, 0.55); }

[data-theme="chicken"] .ck-heat { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.9s ease; }
[data-theme="chicken"].eq1 .ck-heat { opacity: calc(0.3 + var(--gj-sp) * 0.6); animation: heatPulse 1.6s ease-in-out infinite; }
[data-theme="chicken"].eq2 .ck-heat, [data-theme="chicken"].eq3 .ck-heat { opacity: 0.55; animation: heatPulse 1.3s ease-in-out infinite; }
[data-theme="chicken"] .ck-egg { transform-box: view-box; transform-origin: 180px 168px; opacity: 0; transition: opacity 0.5s ease; }
[data-theme="chicken"].ge0 .ck-egg { opacity: 1; }
[data-theme="chicken"].eq0 .ck-egg { animation: ckLay 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, ckWobble 4s ease-in-out 0.8s infinite; }
[data-theme="chicken"].eq1 .ck-egg { animation: ckWobble 2.6s ease-in-out infinite; }
[data-theme="chicken"].eq2 .ck-egg { animation: ckWobble 1.5s ease-in-out infinite; }
[data-theme="chicken"].eq3 .ck-egg { animation: ckWobble 1.1s ease-in-out infinite; }
[data-theme="chicken"].ge4 .ck-egg { opacity: 0; }
@keyframes ckLay { from { transform: translateY(-40px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ckWobble { 0%, 64%, 100% { transform: rotate(0deg); } 70% { transform: rotate(-6deg); } 78% { transform: rotate(5deg); } 86% { transform: rotate(-3deg); } 93% { transform: rotate(2deg); } }
[data-theme="chicken"] .ck-crack { stroke: #7c4a1e; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="chicken"] .ck-peek { opacity: 0; transition: opacity 0.5s ease; }
[data-theme="chicken"].eq3 .ck-peek { opacity: 1; }
[data-theme="chicken"] .ck-beak { transform-box: fill-box; transform-origin: 50% 0%; animation: beakPeck 1.2s ease-in-out infinite; }
@keyframes beakPeck { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(1.8px); } }
[data-theme="chicken"] .ck-halves { opacity: 0; transition: opacity 0.6s ease; }
[data-theme="chicken"].eq4 .ck-halves, [data-theme="chicken"].eq5 .ck-halves { opacity: 1; }

[data-theme="chicken"] .ck-chick { transform-box: view-box; transform-origin: 180px 162px; opacity: 0; transform: translateY(22px) scale(0.6); transition: transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; }
[data-theme="chicken"].eq4 .ck-chick { opacity: 1; transform: scale(calc(0.7 + var(--gj-sp) * 0.2)); }
[data-theme="chicken"].eq5 .ck-chick { opacity: 1; transform: scale(calc(0.9 + var(--gj-sp) * 0.25)); }
[data-theme="chicken"] .ck-feet { fill: none; stroke: #f97316; stroke-width: 2; stroke-linecap: round; }
[data-theme="chicken"] .ck-chick-bob { transform-box: fill-box; transform-origin: 50% 100%; }
[data-theme="chicken"].eq4 .ck-chick-bob { animation: peek 2.4s ease-in-out infinite; }
[data-theme="chicken"].eq5 .ck-chick-bob { animation: hop 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes peek { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-4px) rotate(-5deg); } }
@keyframes hop { 0%, 60%, 100% { transform: translateY(0) scaleY(1); } 70% { transform: translateY(0) scaleY(0.9); } 82% { transform: translateY(-9px) scaleY(1.04); } }
[data-theme="chicken"] .ck-eyes, [data-theme="chicken"] .ck-hen-eye { transform-box: fill-box; transform-origin: center; animation: blink 4.2s ease-in-out infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
[data-theme="chicken"] .ck-wing { transform-box: fill-box; transform-origin: 0% 20%; }
[data-theme="chicken"].eq5 .ck-wing { animation: wingFlap 0.7s ease-in-out infinite alternate; }
@keyframes wingFlap { from { transform: rotate(0deg); } to { transform: rotate(-24deg); } }

[data-theme="chicken"] .ck-hen { transform-box: view-box; transform-origin: 180px 168px; opacity: 0; transform: translateY(24px) scale(0.45); transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, opacity 0.5s ease 0.2s; }
[data-theme="chicken"].ge6 .ck-hen { opacity: 1; transform: none; animation: henBreathe 3.2s ease-in-out 1.2s infinite; }
@keyframes henBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, 0.99); } }
[data-theme="chicken"] .ck-hen-head { transform-box: view-box; transform-origin: 158px 128px; }
[data-theme="chicken"].ge6 .ck-hen-head { animation: henPeck 3.4s ease-in-out 1.2s infinite; }
@keyframes henPeck { 0%, 55%, 100% { transform: rotate(0deg); } 62% { transform: rotate(-12deg); } 70% { transform: rotate(4deg); } 78% { transform: rotate(-8deg); } 86% { transform: rotate(0deg); } }
[data-theme="chicken"] .ck-tails { transform-box: view-box; transform-origin: 210px 130px; animation: tailSway 4.4s ease-in-out infinite; }
[data-theme="chicken"] .ck-tails .mc { transform-origin: 0% 50%; }
@keyframes tailSway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
[data-theme="chicken"] .ck-gold-egg { transform-box: fill-box; transform-origin: 50% 100%; animation: goldBob 2.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.3s); }
@keyframes goldBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-2px) rotate(3deg); } }

/* ==================================================================
   THEME: butterfly — egg · caterpillar · eating · growing · hanging ·
   chrysalis · butterfly (reference point) · garden
   ================================================================== */
[data-theme="butterfly"] .bf-leaf-sway { transform-box: view-box; transform-origin: 232px 52px; animation: leafSway 5s ease-in-out infinite; }
@keyframes leafSway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
[data-theme="butterfly"] .bf-bite { fill: rgba(8, 18, 28, 0.92); stroke: #a3a320; stroke-width: 0.8; stroke-opacity: 0.6; }
[data-theme="butterfly"] .bf-egg { opacity: 0; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px #fef08a); transition: opacity 0.5s ease; }
[data-theme="butterfly"].eq0 .bf-egg { opacity: 1; animation: eggPulse 1.8s ease-in-out infinite; }
@keyframes eggPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
[data-theme="butterfly"] .bf-cat { transform-box: view-box; transform-origin: 238px 100px; opacity: 0; transform: scale(0.4); transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease; }
[data-theme="butterfly"].eq1 .bf-cat { opacity: 1; transform: scale(calc(0.55 + var(--gj-sp) * 0.15)); }
[data-theme="butterfly"].eq2 .bf-cat { opacity: 1; transform: scale(calc(0.7 + var(--gj-sp) * 0.3)); }
[data-theme="butterfly"].eq3 .bf-cat { opacity: 1; transform: none; }
[data-theme="butterfly"] .bf-cat-crawl { transform-box: fill-box; animation: crawl 3s ease-in-out infinite alternate; }
@keyframes crawl { from { transform: translate(1px, -2px); } to { transform: translate(-1px, 2px); } }
[data-theme="butterfly"] .bf-seg { transform-box: fill-box; animation: segWave 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * 0.12s); }
@keyframes segWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2px); } }
[data-theme="butterfly"] .bf-silk { stroke: #f5f5f4; stroke-width: 0.8; opacity: 0.8; }
[data-theme="butterfly"] .bf-hang { opacity: 0; transition: opacity 0.6s ease; }
[data-theme="butterfly"].eq4 .bf-hang { opacity: 1; }
[data-theme="butterfly"] .bf-hang-sway { transform-box: view-box; transform-origin: 168px 64px; animation: cocoonSway 3s ease-in-out infinite; }
[data-theme="butterfly"] .bf-cocoon { transform-box: view-box; transform-origin: 168px 63px; opacity: 0; transform: scaleY(0.15); filter: drop-shadow(0 0 6px rgba(190, 242, 100, 0.7)); transition: transform 1s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.6s ease; }
[data-theme="butterfly"].eq5 .bf-cocoon { opacity: 1; transform: scaleY(calc(0.6 + var(--gj-sp) * 0.4)); animation: cocoonSway 2.6s ease-in-out 1s infinite; }
[data-theme="butterfly"].ge6 .bf-cocoon { opacity: 0.3; transform: scaleY(1); }
[data-theme="butterfly"] .bf-cocoon-wing { opacity: 0; transition: opacity 1s ease; }
[data-theme="butterfly"].eq5 .bf-cocoon-wing { opacity: calc(var(--gj-sp) * 0.55); }
@keyframes cocoonSway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
[data-theme="butterfly"] .bf-fly { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.2); transition: opacity 0.5s ease 0.4s; }
[data-theme="butterfly"].eq6 .bf-fly { opacity: 1; transform: none; animation: bfEmerge 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards; }
[data-theme="butterfly"].eq7 .bf-fly { opacity: 1; transform: none; animation: bfFlight 9s ease-in-out infinite; }
@keyframes bfEmerge { from { transform: translate(18px, -30px) scale(0.2); } to { transform: none; } }
@keyframes bfFlight {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  25% { transform: translate(70px, -34px) rotate(10deg); }
  50% { transform: translate(128px, -8px) rotate(-4deg); }
  75% { transform: translate(56px, 22px) rotate(8deg); }
}
[data-theme="butterfly"] .bf-wing-l { transform-box: fill-box; transform-origin: 100% 50%; }
[data-theme="butterfly"] .bf-wing-r { transform-box: fill-box; transform-origin: 0% 50%; }
[data-theme="butterfly"].eq6 .bf-wing { animation: flap 1.7s ease-in-out infinite alternate; }
[data-theme="butterfly"].eq7 .bf-wing { animation: flap 0.32s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(0.3); } }
[data-theme="butterfly"] .bf-flower { transform-box: fill-box; transform-origin: 50% 100%; animation: bladeSway 4.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.7s); }
[data-theme="butterfly"] .bf-mini { transform-box: fill-box; transform-origin: center; animation: miniFlutter 0.28s ease-in-out infinite alternate, miniDrift 5s ease-in-out infinite; }
@keyframes miniFlutter { from { transform: scaleX(1); } to { transform: scaleX(0.45); } }
@keyframes miniDrift { 0%, 100% { translate: 0 0; } 50% { translate: 10px -8px; } }

/* ==================================================================
   THEME: rocket — blueprint · pad · hull · nose · engine · fuel ·
   launch (reference point) · orbit
   ================================================================== */
[data-theme="rocket"] .rk-star { fill: #e0f2fe; animation: starTwinkle 3s ease-in-out infinite; animation-delay: calc(var(--i) * -0.37s); }
@keyframes starTwinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
[data-theme="rocket"] .rk-dawn { opacity: calc(var(--gj-p) * 0.9); }
[data-theme="rocket"] .gj-halo { display: none; }
[data-theme="rocket"].ge7 .rk-dawn { opacity: 0; }
[data-theme="rocket"] .rk-bright { fill: #fef9c3; filter: drop-shadow(0 0 3px #fde68a); transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.4s); }
[data-theme="rocket"] .rk-grid path { fill: none; stroke: rgba(56, 189, 248, 0.2); stroke-width: 0.8; }
[data-theme="rocket"] .rk-grid { transition: opacity 0.8s ease; }
[data-theme="rocket"].ge1 .rk-grid { opacity: 0.3; }
[data-theme="rocket"].ge3 .rk-grid { opacity: 0; }
[data-theme="rocket"] .rk-blueprint { fill: none; stroke: #38bdf8; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.8)); transition: stroke-dashoffset 1.2s ease, opacity 0.6s ease; }
[data-theme="rocket"].none .rk-blueprint { stroke-dasharray: 0.02 0.015; stroke-dashoffset: 0; animation: ghostPulse 2.4s ease-in-out infinite; }
[data-theme="rocket"].eq0 .rk-blueprint { stroke-dashoffset: calc(1 - (0.3 + var(--gj-sp) * 0.7)); }
[data-theme="rocket"].ge1 .rk-blueprint { stroke-dashoffset: 0; opacity: 0.5; }
[data-theme="rocket"].ge3 .rk-blueprint { opacity: 0; }
[data-theme="rocket"] .rk-note { stroke: #7dd3fc; stroke-width: 1; opacity: 0.8; }
[data-theme="rocket"] .rk-hose { opacity: 0; transition: opacity 0.6s ease; }
[data-theme="rocket"].eq5 .rk-hose { opacity: 1; }
[data-theme="rocket"] .rk-cloud { fill: #94a3b8; opacity: 0.75; transform-box: fill-box; transform-origin: center; animation: billow 3s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.4s); }
@keyframes billow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12) translateY(-2px); } }
[data-theme="rocket"] .rk-ground { transition: opacity 1s ease, transform 1.4s ease; }
[data-theme="rocket"].ge7 .rk-ground { opacity: 0; transform: translateY(40px); }
[data-theme="rocket"] .rk-planet { opacity: 0; transform: translateY(60px); transition: opacity 1.2s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
[data-theme="rocket"].ge7 .rk-planet { opacity: 1; transform: none; }
[data-theme="rocket"] .rk-orbit { opacity: 0; transform-box: view-box; transform-origin: 180px 430px; transition: opacity 1s ease 0.6s; }
[data-theme="rocket"].ge7 .rk-orbit { opacity: 1; animation: orbit 14s linear infinite; }
[data-theme="rocket"] .rk-orbiter { transform: translate(180px, 146px); }
@keyframes orbit { from { transform: rotate(-42deg); } to { transform: rotate(42deg); } }
[data-theme="rocket"] .rk-rocket { transform-box: view-box; transform-origin: 180px 170px; transition: transform 1.4s cubic-bezier(0.55, 0, 0.3, 1), opacity 0.8s ease; }
[data-theme="rocket"].eq6 .rk-rocket { transform: translateY(calc(-24px - var(--gj-sp) * 62px)) scale(calc(1 - var(--gj-sp) * 0.35)); }
[data-theme="rocket"].ge7 .rk-rocket { opacity: 0; transform: translateY(-120px) scale(0.5); }
[data-theme="rocket"] .rk-rocket-shake { transform-box: fill-box; }
[data-theme="rocket"].eq5 .rk-rocket-shake, [data-theme="rocket"].eq6 .rk-rocket-shake { animation: rkShake 0.14s linear infinite; }
@keyframes rkShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(0.8px, -0.4px); } 75% { transform: translate(-0.8px, 0.4px); } }
[data-theme="rocket"] .rk-flame-wrap { transform-box: view-box; transform-origin: 180px 168px; transform: scaleY(0); transition: transform 0.8s ease; }
[data-theme="rocket"].eq5 .rk-flame-wrap { transform: scaleY(calc(0.15 + var(--gj-sp) * 0.3)); }
[data-theme="rocket"].eq6 .rk-flame-wrap { transform: scaleY(1.7); }
[data-theme="rocket"] .rk-flame { transform-box: fill-box; transform-origin: 50% 0%; animation: flicker 0.12s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px #fb923c); }
@keyframes flicker { from { transform: scale(1, 1); } to { transform: scale(0.88, 1.12); } }
[data-theme="rocket"] .rk-streak { stroke: rgba(224, 242, 254, 0.55); stroke-width: 1.2; stroke-linecap: round; opacity: 0; }
[data-theme="rocket"].eq6 .rk-streak { animation: streak 0.9s linear infinite; animation-delay: calc(var(--i) * 0.15s); }
@keyframes streak { 0% { opacity: 0; transform: translateY(-40px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(170px); } }

/* ==================================================================
   THEME: castle — foundation · first bricks · walls · towers ·
   battlements · roofs & gate · flags (reference point) · town
   ================================================================== */
[data-theme="castle"] .cs-trench { fill: rgba(0, 0, 0, 0.3); stroke: rgba(253, 230, 138, 0.45); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity 0.6s ease; }
[data-theme="castle"].eq0 .cs-trench { opacity: 1; }
[data-theme="castle"] .cs-window { fill: #fde68a; animation: candle 2.2s ease-in-out infinite; filter: drop-shadow(0 0 3px #fbbf24); }
@keyframes candle { 0%, 100% { opacity: 1; } 45% { opacity: 0.7; } 55% { opacity: 0.95; } }
[data-theme="castle"] .cs-flags { opacity: 0; transition: opacity 0.6s ease; }
[data-theme="castle"].ge6 .cs-flags { opacity: 1; }
[data-theme="castle"] .cs-flag-raise { transform: translateY(18px); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
[data-theme="castle"].eq6 .cs-flag-raise { transform: translateY(calc((1 - var(--gj-sp)) * 18px)); }
[data-theme="castle"].ge7 .cs-flag-raise { transform: none; }
[data-theme="castle"] .cs-cloth { transform-box: fill-box; transform-origin: 0% 50%; animation: wave 0.9s ease-in-out infinite alternate; }
@keyframes wave { from { transform: scaleX(1) skewY(0deg); } to { transform: scaleX(0.84) skewY(7deg); } }
[data-theme="castle"] .cs-fire { transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(0 0 4px #fb923c); animation: fireFlicker 0.5s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * -0.13s); }
@keyframes fireFlicker { from { transform: scale(1, 1); } to { transform: scale(0.85, 1.18); } }
[data-theme="castle"] .cs-banner { transform-box: fill-box; transform-origin: 50% 0%; animation: bannerSway 3.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.6s); }
@keyframes bannerSway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
[data-theme="castle"] .cs-lit { animation: candle 2.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.35s); }
[data-theme="castle"] .cs-firework { fill: none; stroke-width: 2; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
[data-theme="castle"].eq7 .cs-firework { animation: firework 2.4s ease-out infinite; animation-delay: calc(1.2s + var(--i) * 0.8s); }
@keyframes firework { 0% { opacity: 0; transform: scale(0.2); } 10% { opacity: 1; } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.15); } }

/* ==================================================================
   THEME: diamond — coal · pressure · heat · crystal · cutting ·
   polish · brilliant (reference point) · crown
   ================================================================== */
[data-theme="diamond"] .dm-veins path { fill: none; stroke: rgba(120, 113, 108, 0.35); stroke-width: 1; }
[data-theme="diamond"] .dm-plate-top, [data-theme="diamond"] .dm-plate-bot { transform-box: view-box; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
[data-theme="diamond"].eq1 .dm-plate-top { transform: translateY(calc(6px + var(--gj-sp) * 18px)); }
[data-theme="diamond"].eq1 .dm-plate-bot { transform: translateY(calc(-5px - var(--gj-sp) * 14px)); }
[data-theme="diamond"].ge2 .dm-plate-top { transform: translateY(16px); }
[data-theme="diamond"].ge2 .dm-plate-bot { transform: translateY(-12px); }
[data-theme="diamond"].ge6 .dm-plate-top { transform: translateY(-14px); }
[data-theme="diamond"].ge6 .dm-plate-bot { transform: translateY(14px); }
[data-theme="diamond"] .dm-crack { stroke: #a8a29e; stroke-width: 1; }
[data-theme="diamond"] .dm-magma { stroke: #f97316; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 3px #f97316); transition: stroke-dashoffset 1.4s ease, opacity 1s ease; }
[data-theme="diamond"].ge4 .dm-magma { opacity: 0.35; }
[data-theme="diamond"] .dm-heat { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.8s ease; }
[data-theme="diamond"].eq1 .dm-heat { opacity: 0.2; }
[data-theme="diamond"].eq2 .dm-heat { opacity: calc(0.3 + var(--gj-sp) * 0.7); animation: heatPulse 1.6s ease-in-out infinite; }
[data-theme="diamond"].eq3 .dm-heat { opacity: 0.35; }
@keyframes heatPulse { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.1); } }
[data-theme="diamond"] .dm-coal { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 0.7s ease, transform 0.7s ease; }
[data-theme="diamond"].ge0 .dm-coal { opacity: 1; }
[data-theme="diamond"].eq1 .dm-coal { animation: jitter 0.18s linear infinite; }
[data-theme="diamond"].ge3 .dm-coal { opacity: 0; transform: scale(0.7); }
@keyframes jitter { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(0.7px, 0.5px); } 66% { transform: translate(-0.7px, -0.3px); } }
[data-theme="diamond"] .dm-coal-glow { opacity: 0; transition: opacity 0.8s ease; }
[data-theme="diamond"].eq2 .dm-coal-glow { opacity: calc(0.2 + var(--gj-sp) * 0.55); }
[data-theme="diamond"] .dm-rough { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s, opacity 0.6s ease 0.3s; filter: drop-shadow(0 0 8px rgba(125, 211, 252, 0.6)); }
[data-theme="diamond"].eq3 .dm-rough { opacity: 1; transform: scale(calc(0.75 + var(--gj-sp) * 0.25)); }
[data-theme="diamond"].ge4 .dm-rough { opacity: 0; transform: scale(1.15); }
[data-theme="diamond"] .dm-gem { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s, opacity 0.6s ease 0.3s; filter: drop-shadow(0 0 10px rgba(186, 230, 253, 0.7)); }
[data-theme="diamond"].eq4 .dm-gem { opacity: 0.9; transform: scale(calc(0.85 + var(--gj-sp) * 0.1)); }
[data-theme="diamond"].eq5 .dm-gem { opacity: 1; transform: scale(calc(0.95 + var(--gj-sp) * 0.05)); }
[data-theme="diamond"].ge6 .dm-gem { opacity: 1; transform: scale(1.2); }
[data-theme="diamond"].ge7 .dm-gem { transform: translateY(-4px) scale(1.2); }
[data-theme="diamond"] .dm-gem-float { transform-box: fill-box; }
[data-theme="diamond"].ge6 .dm-gem-float { animation: gemFloat 3.2s ease-in-out infinite; }
@keyframes gemFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
[data-theme="diamond"] .dm-facet { stroke: #f0f9ff; stroke-width: 0.9; opacity: 0.8; }
[data-theme="diamond"] .dm-shine { opacity: 0; transition: opacity 1s ease; }
[data-theme="diamond"].eq5 .dm-shine { opacity: calc(var(--gj-sp) * 0.22); }
[data-theme="diamond"].ge6 .dm-shine { opacity: 0.14; }
[data-theme="diamond"] .dm-glint { opacity: 0; }
[data-theme="diamond"].ge5 .dm-glint { animation: glint 2.2s ease-in-out infinite; }
@keyframes glint { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 1; } }
[data-theme="diamond"] .dm-sparkle { fill: #fff; transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.4s); }
[data-theme="diamond"] .dm-rays { fill: rgba(224, 242, 254, 0.13); transform-box: view-box; transform-origin: 180px 124px; }
[data-theme="diamond"].ge6 .dm-rays { animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[data-theme="diamond"] .dm-crownset { filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.45)); }

/* ==================================================================
   Build sheet — "ثبت ویدیوی جدید"
   ================================================================== */
body.sheet-open { overflow: hidden; }
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(3, 4, 8, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease both;
}
.sheet {
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 26px 26px 0 0;
  background: linear-gradient(180deg, #171a28, #0e1019);
  border: 1px solid var(--border-glow);
  border-bottom: none;
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.9);
  animation: sheetUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sheet-backdrop.closing { animation: fadeOut 0.24s ease forwards; }
.sheet-backdrop.closing .sheet { animation: sheetDown 0.24s ease forwards; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheetDown { to { transform: translateY(100%); } }
@keyframes fadeOut { to { opacity: 0; } }
.sheet-handle { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); }
.sheet-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.sheet-title .icon { color: #6ee7b7; }
.sheet-sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.8; color: var(--text-dim); }
.sheet-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.sheet-input-row { display: flex; gap: 8px; }
.sheet-input-row input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
}
.sheet-input-row input:focus { outline: none; border-color: var(--accent-2); box-shadow: var(--glow-2); }
.sheet-detect { display: flex; align-items: center; gap: 5px; min-height: 18px; margin: 8px 0 0; font-size: 12px; font-weight: 600; color: #6ee7b7; line-height: 1.7; }
.sheet-detect.is-error { color: #fca5a5; }
.sheet-detect .icon { flex-shrink: 0; }
.sheet-rules { list-style: none; margin: 14px 0 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
.sheet-rules li { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.7; color: var(--text-dim); }
.sheet-rules .icon { flex-shrink: 0; margin-top: 3px; color: #6ee7b7; }
.sheet-rules b { color: #6ee7b7; font-weight: 700; }
.sheet-rules b.sheet-limit-hit { color: #fca5a5; }
.sheet-submit { width: 100%; justify-content: center; margin: 0; padding: 14px; font-size: 14px; }
.sheet-submit:disabled { opacity: 0.45; box-shadow: none; }
.sheet-cancel { display: block; width: 100%; margin-top: 6px; padding: 11px; border: none; background: none; color: var(--text-dim); font-family: inherit; font-size: 13px; cursor: pointer; }

/* connect-your-channel step (first time only) */
.connect-card { text-align: center; padding: 6px 4px 14px; }
.connect-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 10px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff4e45, #c4302b);
  box-shadow: 0 12px 30px -10px rgba(255, 78, 69, 0.7);
  color: #fff;
}
.connect-hero .icon { width: 24px; height: 24px; fill: currentColor; }
.connect-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.connect-card p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--text-dim); }
.connect-note { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--text-dim); }
.connect-note .icon { flex-shrink: 0; margin-top: 3px; }

/* pick-your-uploads step */
.picker-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; font-size: 12px; line-height: 1.7; color: var(--text-dim); }
.picker-quota { flex-shrink: 0; padding: 2px 9px; border-radius: 999px; background: rgba(52, 211, 153, 0.12); color: #6ee7b7; font-weight: 700; font-size: 11px; }
.picker-quota.is-empty { background: rgba(248, 113, 113, 0.12); color: #fca5a5; }
.picker-list { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow-y: auto; margin: 0 -4px; padding: 2px 4px; }
.vid-row {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.15s ease;
}
.vid-row:active { transform: scale(0.98); }
.vid-row.is-selected { border-color: #34d399; background: rgba(52, 211, 153, 0.1); }
.vid-row.is-disabled { opacity: 0.45; cursor: default; }
.vid-thumb {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #1f2233, #12141f);
  color: var(--text-dim);
}
.vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vid-title { font-size: 12.5px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vid-meta { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vid-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.vid-check .icon { width: 14px; height: 14px; stroke-width: 3; }
.vid-row.is-selected .vid-check { background: #34d399; border-color: #34d399; color: #04241a; transform: scale(1.08); }
.vid-state { flex-shrink: 0; max-width: 88px; padding: 3px 8px; border-radius: 999px; background: var(--surface-strong); font-size: 10px; font-weight: 700; color: var(--text-dim); text-align: center; line-height: 1.5; }
.skeleton-row { cursor: default; }
.skeleton-row .vid-thumb, .skeleton-row .sk-line { background: linear-gradient(110deg, #1b1e2c 30%, #262a3b 50%, #1b1e2c 70%); background-size: 250% 100%; animation: shimmerBg 1.4s linear infinite; }
.skeleton-row .sk-line { flex: 1; height: 12px; border-radius: 6px; }
.picker-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0; color: var(--text-dim); font-size: 12.5px; }
.picker-empty .icon { width: 28px; height: 28px; }
.picker-empty p { margin: 0; }
.picker-hint { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--text-dim); }
.picker-hint .icon { flex-shrink: 0; margin-top: 4px; }
.picker-hint b { color: var(--text); }
#pickerSubmit { margin-top: 8px; }
.picker-more { margin-top: 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); }
.picker-more summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.picker-more summary::-webkit-details-marker { display: none; }
.picker-more summary .faq-chevron { margin-inline-start: auto; }
.picker-more[open] .faq-chevron { transform: rotate(180deg); }
.picker-more .sheet-input-row { padding: 0 12px 12px; }
.picker-channels { margin-top: 14px; }
.picker-channels-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.picker-channels-title small { color: var(--text-dim); font-weight: 600; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 700;
}
.ch-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.ch-chip > .icon { width: 14px; height: 14px; color: #ff4e45; fill: currentColor; }
.ch-chip > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ch-chip small { font-size: 9.5px; color: #fcd34d; font-weight: 700; }
.ch-chip.is-review { border-color: rgba(251, 191, 36, 0.4); }
.ch-chip button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.08); color: var(--text-dim); cursor: pointer; }
.ch-chip button .icon { width: 12px; height: 12px; }
.ch-add { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, 0.25); background: none; color: var(--text); font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.gj-video-badge.pending { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }

/* admin: channels waiting for review */
.admin-channel { flex-wrap: wrap; }
.admin-channel .admin-list-title { color: var(--accent-2); text-decoration: none; }
.admin-channel-actions { display: flex; gap: 6px; margin-inline-start: auto; }
.chip-btn.danger { color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }

/* ==================================================================
   Results · AI coach · group challenges
   ================================================================== */
.link-btn { padding: 0; border: none; background: none; color: var(--accent-2); font-family: inherit; font-size: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- members' results on the idea page ---------- */
.results-card {
  margin-top: 16px;
  padding: 16px 14px 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.07), rgba(255, 255, 255, 0.02)), var(--bg-2);
  border: 1px solid var(--border);
}
.results-card:empty { display: none; }
.res-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.res-head h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14.5px; font-weight: 800; }
.res-head h3 .icon { color: var(--accent-2); }
.res-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }
.res-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: liveDot 2s ease-out infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); } 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
.res-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.res-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 9px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); text-align: center; min-width: 0; }
.res-tile .icon { width: 16px; height: 16px; color: var(--accent-2); margin-bottom: 2px; }
.res-tile b { font-size: 15.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.res-tile span { font-size: 10.5px; color: var(--text-dim); font-weight: 700; }
.res-tile small { font-size: 9.5px; color: #6ee7b7; line-height: 1.5; margin-top: 2px; }
.res-tile:last-child .icon { color: #fbbf24; }
.res-sub { display: flex; align-items: center; gap: 5px; margin: 14px 0 8px; font-size: 12px; font-weight: 800; color: var(--text); }
.res-sub .icon { width: 14px; height: 14px; color: #fbbf24; }
.res-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.res-top li { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
.res-top a { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--text); text-decoration: none; }
.res-top-title { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-top-meta { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-rank, .ch-rank { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-strong); font-size: 11.5px; font-weight: 800; }
.r1 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #451a03; }
.r2 { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2937; }
.r3 { background: linear-gradient(135deg, #fdba74, #c2410c); color: #431407; }
.res-views { flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(34, 211, 238, 0.12); color: #67e8f9; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.res-views .icon { width: 11px; height: 11px; }
.res-note, .res-empty { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 11.5px; line-height: 1.8; color: var(--text-dim); }
.res-note .icon, .res-empty .icon { flex-shrink: 0; width: 13px; height: 13px; margin-top: 4px; }
.res-empty { margin: 0; padding: 12px; border-radius: 14px; border: 1px dashed var(--border-glow); }
.res-monetized { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; padding: 8px 11px; border-radius: 14px; background: rgba(251, 191, 36, 0.08); border: 1px solid rgba(251, 191, 36, 0.3); color: #fcd34d; font-size: 11.5px; font-weight: 700; line-height: 1.7; }
.res-monetized .icon { width: 14px; height: 14px; margin-top: 3px; }
.res-mine { margin-top: 14px; padding-top: 2px; border-top: 1px solid var(--border); }
.res-mine-row { display: flex; flex-wrap: wrap; gap: 6px; }
.res-mine-row a.gj-chip { color: #fcd34d; text-decoration: none; }
.res-channels { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.res-channel { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 9px 11px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
.res-channel > div:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; }
.res-channel b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-channel span { font-size: 10.5px; color: var(--text-dim); }
.res-gain.up { color: #6ee7b7 !important; font-weight: 700; }
.res-gain.down { color: #fca5a5 !important; }
.res-channel-actions { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.res-mon-btn { border-color: rgba(251, 191, 36, 0.45); color: #fcd34d; }
.res-mon-done { display: inline-flex; align-items: center; gap: 3px; color: #fcd34d; font-weight: 800; font-size: 11px; }
.res-skeleton { display: flex; flex-direction: column; gap: 8px; }
.res-skeleton span { height: 14px; border-radius: 7px; background: linear-gradient(110deg, #1b1e2c 30%, #262a3b 50%, #1b1e2c 70%); background-size: 250% 100%; animation: shimmerBg 1.4s linear infinite; }
.res-skeleton span:first-child { width: 55%; height: 18px; }
.res-skeleton span:last-child { width: 80%; }

/* ---------- AI coach ---------- */
.coach-card { margin-top: 16px; padding: 13px; border-radius: 20px; background: linear-gradient(160deg, rgba(168, 85, 247, 0.14), rgba(34, 211, 238, 0.05)); border: 1px solid rgba(168, 85, 247, 0.32); }
.coach-title-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; font-size: 13px; }
.coach-title-row .icon { color: #d8b4fe; }
.coach-title-row span { flex-basis: 100%; font-size: 10.5px; color: var(--text-dim); }
.coach-video { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.coach-video a { min-width: 0; font-size: 12px; font-weight: 700; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-head { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.coach-score {
  --s: 5;
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(#a78bfa calc(var(--s) * 10%), rgba(255, 255, 255, 0.08) 0);
}
.coach-score::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #171a28; }
.coach-score b, .coach-score small { position: relative; line-height: 1; }
.coach-score b { font-size: 16px; font-weight: 800; margin-top: 6px; }
.coach-score small { font-size: 8.5px; color: var(--text-dim); margin-top: -14px; }
.coach-headline { margin: 0; font-size: 12.5px; font-weight: 700; line-height: 1.8; }
.coach-strengths { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.coach-strengths li { display: flex; align-items: flex-start; gap: 5px; font-size: 11.5px; line-height: 1.7; color: #6ee7b7; }
.coach-strengths .icon { flex-shrink: 0; width: 13px; height: 13px; margin-top: 4px; }
.coach-tips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; counter-reset: tip; }
.coach-tips li { position: relative; padding: 10px 11px 10px 11px; border-radius: 14px; background: rgba(8, 9, 15, 0.45); border: 1px solid var(--border); }
.coach-tips p { margin: 5px 0 0; font-size: 12px; line-height: 1.8; }
.coach-area { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(168, 85, 247, 0.18); color: #e9d5ff; font-size: 10.5px; font-weight: 800; }
.coach-area .icon { width: 11px; height: 11px; }
.coach-example { padding: 6px 9px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--text-dim); font-size: 11px !important; }
.coach-titles { display: flex; flex-direction: column; gap: 6px; }
.coach-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 11px; border-radius: 12px; border: 1px dashed rgba(168, 85, 247, 0.45); background: rgba(168, 85, 247, 0.07); color: var(--text); font-family: inherit; font-size: 12px; font-weight: 700; text-align: start; cursor: pointer; }
.coach-title .icon { flex-shrink: 0; width: 13px; height: 13px; color: #d8b4fe; }
.coach-title:active { transform: scale(0.98); }
.coach-next { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; padding: 9px 11px; border-radius: 14px; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.28); font-size: 12px; line-height: 1.8; }
.coach-next .icon { flex-shrink: 0; width: 14px; height: 14px; margin-top: 4px; color: #6ee7b7; transform: scaleX(-1); }
.coach-msg { margin: 0 0 8px; font-size: 12px; line-height: 1.8; color: var(--text-dim); }
.coach-pending { display: flex; align-items: center; gap: 9px; padding: 12px; border-radius: 14px; background: rgba(8, 9, 15, 0.4); font-size: 12px; color: #e9d5ff; }
.coach-dots { display: inline-flex; gap: 4px; }
.coach-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c4b5fd; animation: coachDot 1.2s ease-in-out infinite; }
.coach-dots i:nth-child(2) { animation-delay: 0.15s; }
.coach-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes coachDot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.coach-older { margin-top: 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(8, 9, 15, 0.3); }
.coach-older summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 10px 12px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.coach-older summary::-webkit-details-marker { display: none; }
.coach-older summary .faq-chevron { margin-inline-start: auto; }
.coach-older[open] .faq-chevron { transform: rotate(180deg); }
.coach-older .coach-entry { padding: 0 12px 12px; margin-top: 4px; border-top: 1px solid var(--border); padding-top: 12px; }

/* ---------- challenges ---------- */
.detail-challenges:empty { display: none; }
.detail-challenges { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ch-strip { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px 13px; border-radius: 16px; border: 1px solid rgba(251, 146, 60, 0.35); background: rgba(251, 146, 60, 0.08); color: var(--text); font-family: inherit; font-size: 11.5px; line-height: 1.7; text-align: start; cursor: pointer; overflow: hidden; }
.ch-strip > .icon { flex-shrink: 0; color: #fdba74; }
.ch-strip b { color: #fdba74; margin-inline-end: 4px; }
.ch-strip-bar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.06); }
.ch-strip-bar i { display: block; height: 100%; background: linear-gradient(270deg, #fb923c, #fbbf24); transition: width 1s ease; }
.ch-strip.is-invite { border-style: dashed; }

.challenges-entry { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0 14px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(251, 146, 60, 0.4); background: linear-gradient(135deg, rgba(251, 146, 60, 0.16), rgba(236, 72, 153, 0.08)); color: var(--text); font-family: inherit; text-align: start; cursor: pointer; }
.challenges-entry > .icon:first-child { width: 22px; height: 22px; color: #fdba74; flex-shrink: 0; }
.challenges-entry span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.challenges-entry b { font-size: 13.5px; }
.challenges-entry small { font-size: 11px; color: var(--text-dim); }
.challenges-entry-chev { transform: rotate(90deg); color: var(--text-dim); }
.challenges-entry:active { transform: scale(0.98); }

.challenges .ch-intro { margin: 0 0 14px; font-size: 12.5px; line-height: 1.9; color: var(--text-dim); }
.challenges .ch-intro b { color: var(--text); }
.challenges .empty { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 26px 0; color: var(--text-dim); font-size: 13px; }
.challenge-card { position: relative; margin-bottom: 12px; padding: 14px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)), var(--bg-2); border: 1px solid var(--border); transition: border-color 0.4s ease, box-shadow 0.4s ease; }
.challenge-card.is-active { border-color: rgba(251, 146, 60, 0.35); }
.challenge-card.is-joined { box-shadow: 0 18px 40px -26px rgba(251, 146, 60, 0.7); }
.challenge-card.is-ended { opacity: 0.8; }
.challenge-card.is-focus { border-color: #fb923c; box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.35); }
.challenge-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.challenge-status { padding: 2px 9px; border-radius: 999px; background: rgba(251, 146, 60, 0.16); color: #fdba74; font-size: 10.5px; font-weight: 800; }
.is-upcoming .challenge-status { background: rgba(34, 211, 238, 0.14); color: #67e8f9; }
.is-ended .challenge-status { background: var(--surface-strong); color: var(--text-dim); }
.challenge-when { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.challenge-when .icon { width: 12px; height: 12px; }
.challenge-card h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 800; line-height: 1.6; }
.challenge-desc { margin: 0 0 6px; font-size: 12px; line-height: 1.8; color: var(--text-dim); }
.challenge-goal { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 12px; color: var(--text-dim); }
.challenge-goal b { color: var(--text); }
.challenge-goal .icon { width: 13px; height: 13px; color: #fdba74; }
.ch-group p { display: flex; align-items: center; gap: 5px; margin: 6px 0 0; font-size: 11px; color: var(--text-dim); }
.ch-group .icon { width: 12px; height: 12px; }
.ch-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.ch-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(270deg, #fb923c, #fbbf24, #fde68a); box-shadow: 0 0 10px rgba(251, 146, 60, 0.6); transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.ch-bar.small { flex: 1; height: 5px; min-width: 40px; }
.ch-my { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(251, 146, 60, 0.07); border: 1px solid rgba(251, 146, 60, 0.25); }
.ch-ring { --p: 0; position: relative; flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(#fb923c calc(var(--p) * 1%), rgba(255, 255, 255, 0.08) 0); }
.ch-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #171a28; }
.ch-ring span { position: relative; font-size: 15px; font-weight: 800; }
.ch-ring small { font-size: 10px; color: var(--text-dim); font-weight: 700; }
.ch-my-text { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.ch-my-text span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-dim); }
.ch-my-text .icon { width: 12px; height: 12px; color: #fb923c; }
.challenge-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.challenge-actions .link-btn { color: var(--text-dim); font-size: 12px; font-weight: 600; }
.ch-join { flex: 1; justify-content: center; margin: 0; padding: 11px; font-size: 13.5px; background: linear-gradient(135deg, #fb923c, #f59e0b); color: #431407; box-shadow: 0 10px 24px -10px rgba(251, 146, 60, 0.8); }
.ch-board:empty { display: none; }
.ch-board { margin-top: 10px; }
.ch-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ch-board-list li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); font-size: 12px; }
.ch-board-list li.is-me { border-color: rgba(251, 146, 60, 0.5); background: rgba(251, 146, 60, 0.08); }
.ch-name { width: 34%; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.ch-name small { color: #fdba74; font-weight: 700; }
.ch-count { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; min-width: 44px; justify-content: flex-end; font-weight: 800; font-variant-numeric: tabular-nums; }
.ch-count .icon { width: 13px; height: 13px; color: var(--success); }

/* challenge prize box */
.ch-prize { margin-top: 12px; padding: 11px 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(251, 191, 36, 0.13), rgba(168, 85, 247, 0.08)); border: 1px solid rgba(251, 191, 36, 0.38); }
.ch-prize-title { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin: 0; font-size: 13px; font-weight: 700; color: #fde68a; }
.ch-prize-title b { color: #fff7d6; font-size: 14px; }
.ch-prize-title .icon { width: 15px; height: 15px; color: #fbbf24; }
.ch-prize-sub { display: flex; align-items: flex-start; gap: 4px; margin: 5px 0 0; font-size: 11px; line-height: 1.8; color: var(--text-dim); }
.ch-prize-sub .icon { flex-shrink: 0; width: 12px; height: 12px; margin-top: 4px; }
.ch-places { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
details.ch-prize { padding: 9px 12px; }
.ch-prize > summary { list-style: none; cursor: pointer; flex-wrap: nowrap; }
.ch-prize > summary::-webkit-details-marker { display: none; }
.ch-prize > summary > .icon { flex-shrink: 0; }
.ch-prize-more { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: auto; font-size: 11px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.ch-prize-more .icon { width: 13px; height: 13px; color: var(--text-dim) !important; }
.ch-prize[open] .ch-prize-more .faq-chevron { transform: rotate(180deg); }
.gj-head .info-tip { font-size: 10.5px; }
.ch-place { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
.ch-place .icon { width: 11px; height: 11px; }
.ch-prize-rule { margin: 8px 0 0; font-size: 10px; line-height: 1.8; color: rgba(157, 157, 174, 0.85); }
.ch-prize.is-final { display: block; }
.ch-prize.is-final > .icon { color: #fbbf24; margin-inline-end: 4px; vertical-align: -2px; }
.ch-prize.is-final > span { font-size: 12px; color: var(--text-dim); }
.ch-winners { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ch-winners li { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 12px; background: rgba(8, 9, 15, 0.35); font-size: 12px; }
.ch-winners li.is-me { outline: 1px solid rgba(251, 191, 36, 0.6); }
.ch-winners .ch-name { flex: 1; width: auto; }
.ch-win-prize { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-weight: 800; color: #fde68a; white-space: nowrap; }
.ch-win-prize .icon { width: 12px; height: 12px; vertical-align: -1px; }
.ch-win-prize small { font-size: 9.5px; color: var(--text-dim); font-weight: 700; }
.ch-win-prize .ch-paid { color: #6ee7b7; }

/* admin: prize pools */
.admin-prize-rule { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 10px; padding: 10px 12px; border-radius: 14px; background: rgba(52, 211, 153, 0.07); border: 1px solid rgba(52, 211, 153, 0.25); font-size: 11.5px; line-height: 1.9; color: var(--text-dim); }
.admin-prize-rule .icon { flex-shrink: 0; margin-top: 4px; color: #6ee7b7; }
.admin-prize-rule b { color: var(--text); }
.admin-prize-rule code { font-size: 10.5px; }
.admin-challenges > li { flex-wrap: wrap; }
.admin-prize-numbers { flex-basis: 100%; margin: 4px 0 0; font-size: 11px; line-height: 1.8; color: var(--text-dim); }
.admin-prize-numbers b { color: #fde68a; }
.admin-prize-numbers .icon { width: 12px; height: 12px; color: #fbbf24; vertical-align: -1px; }
.admin-warn { color: #fca5a5; font-weight: 700; }
.admin-payouts { flex-basis: 100%; list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.admin-payout { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); }
.admin-payout .admin-list-title small { color: var(--text-dim); font-weight: 500; }

/* admin: create challenges */
.admin-ch-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.admin-ch-form input, .admin-ch-form textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px; box-sizing: border-box; }
.admin-ch-form textarea { min-height: 60px; resize: vertical; }
.admin-ch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.admin-ch-row label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-dim); font-weight: 700; }
.admin-ch-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-ch-form .build-btn { justify-content: center; margin: 0; }

@media (max-width: 380px) {
  .res-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .gj-mote, .gj-sparkle, .gj-burst-dot, .gj-ripple, .rk-streak, .gj-drops path, .gj-birds, .gj-clouds { display: none; }
  .mc, .mc-draw .dr { transition-duration: 0.01s !important; }
  .mc.pop { animation: none !important; }
  .res-live i, .coach-dots i { animation: none; }
}

/* lead funnel entry points (the pages themselves: funnel.css) */
.admin-header-row { flex-wrap: wrap; }
a.drafts-entry-btn { text-decoration: none; }
.funnel-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--success), #10b981);
  color: #06281c;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(52, 211, 153, 0.55);
}