/* ============================================================
   RunOrJog — LIVE CAPTURE DEMO
   Interactive hex grid the visitor paints by dragging/tapping.
   Accent follows the Energy tweak via --cyan.
   ============================================================ */

#demo { position: relative; }
#demo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(820px 420px at 50% 0%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 70%);
}
.demo-wrap {
  position: relative; z-index: 1; max-width: 920px; margin: 0 auto;
  border-radius: 26px; padding: 26px 26px 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(14, 18, 42, 0.7), rgba(8, 9, 18, 0.82));
  border: 1px solid var(--stroke-2, rgba(255,255,255,.16));
  box-shadow: 0 36px 90px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
/* subtle map-ish texture under the grid (fallback when live map is absent) */
.demo-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(70deg, transparent 49%, rgba(120,150,190,.06) 49.6%, transparent 50.2%),
    linear-gradient(-55deg, transparent 49%, rgba(120,150,190,.045) 49.6%, transparent 50.2%);
  background-size: 70px 70px, 104px 104px;
}
/* live Mapbox game map behind the hex grid */
.demo-map {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden;
}
.demo-map canvas { border-radius: inherit; }
/* darken + vignette so hexes and HUD stay legible over the map */
.demo-map::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 40%, transparent 40%, rgba(6,7,16,.55) 100%),
    linear-gradient(180deg, rgba(6,7,16,.35), rgba(6,7,16,.55));
}
.demo-wrap.has-map::before { opacity: 0; }   /* drop faux texture once the map loads */
.demo-wrap.has-map .demo-grid .cell:not(.mine):not(.enemy) { background: rgba(255,255,255,0.015); }

.demo-grid {
  position: relative; z-index: 1; width: 100%; height: 340px; margin: 0 auto;
  touch-action: none; cursor: crosshair;
}
.demo-grid .cell {
  position: absolute; width: var(--cw, 58px); height: var(--ch, 66px);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: background .3s ease, box-shadow .3s ease, transform .25s ease;
}
.demo-grid .cell:hover { background: rgba(255, 255, 255, 0.07); }

/* enemy-held cells (pre-seeded) the visitor can take over */
.demo-grid .cell.enemy {
  background: color-mix(in srgb, var(--pink) 32%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink) 60%, transparent), inset 0 0 16px -4px var(--pink);
  animation: enemy-pulse 2.4s ease-in-out infinite;
}
@keyframes enemy-pulse { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }

/* captured by the visitor */
.demo-grid .cell.mine {
  background: color-mix(in srgb, var(--cyan) 48%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cyan) 85%, transparent), inset 0 0 20px -3px var(--cyan), 0 0 22px -6px var(--cyan);
  transform: scale(1.04);
}
.demo-grid .cell.mine.fresh { animation: cap-pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes cap-pop {
  0% { transform: scale(.55); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1.04); }
}
/* ripple ring on capture */
.demo-grid .ring {
  position: absolute; z-index: 2; pointer-events: none; border-radius: 50%;
  width: 14px; height: 14px; transform: translate(-50%, -50%);
  border: 2px solid var(--cyan); box-shadow: 0 0 14px var(--cyan);
  animation: cap-ring .6s ease-out forwards;
}
@keyframes cap-ring { 0% { opacity: .9; width: 8px; height: 8px; } 100% { opacity: 0; width: 86px; height: 86px; } }

/* the auto-runner dot tracing a path */
.demo-runner {
  position: absolute; z-index: 3; width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px var(--cyan); transform: translate(-50%, -50%);
  transition: left .9s cubic-bezier(.45,0,.55,1), top .9s cubic-bezier(.45,0,.55,1);
}
.demo-runner::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--cyan) 70%, transparent); animation: runner-pulse 1.4s ease-out infinite;
}
@keyframes runner-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }

/* HUD */
.demo-hud {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--stroke, rgba(255,255,255,.085));
}
.demo-stat { display: flex; flex-direction: column; gap: 2px; min-width: 92px; }
.demo-stat .ds-n { font-family: var(--font-mono, monospace); font-weight: 700; font-size: 26px; line-height: 1; color: var(--cyan); }
.demo-stat .ds-n.ds-endo { color: var(--gold); }
.demo-stat .ds-u { font-size: 15px; opacity: .7; margin-left: 1px; }
.demo-stat .ds-l { font-size: 11.5px; color: var(--text-45, #8a8aa0); letter-spacing: .02em; }
.demo-reset {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .04em; color: var(--text-70, #c8c8d8);
  padding: 9px 15px; border-radius: 11px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--stroke-2, rgba(255,255,255,.16));
  transition: background .2s, border-color .2s, color .2s;
}
.demo-reset:hover { background: rgba(255, 255, 255, 0.07); color: #fff; border-color: var(--cyan); }
.demo-reset svg { transition: transform .4s ease; }
.demo-reset:hover svg { transform: rotate(-180deg); }

.demo-hint {
  position: absolute; z-index: 4; left: 50%; top: 200px; transform: translateX(-50%);
  font-family: var(--font-mono, monospace); font-size: 12px; letter-spacing: .06em;
  color: var(--text-45, #8a8aa0); pointer-events: none; transition: opacity .4s ease;
  animation: hint-bob 2s ease-in-out infinite;
}
@keyframes hint-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
.demo-hint.gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .demo-grid .cell.mine.fresh, .demo-runner::after, .demo-hint, .demo-grid .cell.enemy { animation: none; }
  .demo-runner { transition: none; }
}