/* ============================================================
   RunOrJog — SHOWCASE VARIETY
   Bespoke media panels so each detailed row reads differently
   instead of "phone after phone". Loads after effects.css.
   ============================================================ */

.sc-panel {
  width: 100%; max-width: 360px; position: relative; overflow: hidden;
  border-radius: 26px; padding: 18px;
  background: linear-gradient(165deg, rgba(22, 24, 46, 0.86), rgba(10, 11, 22, 0.9));
  border: 1px solid var(--stroke-2);
  box-shadow: 0 32px 80px -34px rgba(0, 0, 0, 0.75), 0 0 80px -28px var(--accent, var(--cyan));
  will-change: transform;
}
.sc-panel::after { /* tilt glare */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.12), transparent 50%);
  opacity: 0; transition: opacity .25s;
}
.sc-panel.is-tilting::after { opacity: 1; }
.sc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sc-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.sc-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent, var(--cyan)); border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 45%, transparent);
  padding: 4px 9px; border-radius: 7px; background: color-mix(in srgb, var(--accent, var(--cyan)) 10%, transparent); }

/* ── 1. Hex territory map ───────────────────────────────── */
.sc-hex { --accent: var(--green); }
.sc-hexwrap { position: relative; height: 360px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #0e1430, #070711);
  border: 1px solid var(--stroke); }
.sc-hexwrap::before { content: ""; position: absolute; inset: -10%;
  background-image:
    linear-gradient(70deg, transparent 48.5%, rgba(120,150,190,.10) 49.5%, transparent 50.5%),
    linear-gradient(-55deg, transparent 48.5%, rgba(120,150,190,.07) 49.5%, transparent 50.5%);
  background-size: 64px 64px, 96px 96px; }
.hxrow { position: absolute; display: flex; gap: 8px; left: 50%; transform: translateX(-50%); }
.hx { width: 40px; height: 45px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background: rgba(255,255,255,.03); outline: 1px solid rgba(255,255,255,.07); }
.hx.on { outline: none; }
.hx.g { background: color-mix(in srgb, var(--green) 55%, transparent); box-shadow: 0 0 18px -2px var(--green); border: 1px solid var(--green); }
.hx.c { background: color-mix(in srgb, var(--cyan) 50%, transparent); box-shadow: 0 0 18px -2px var(--cyan); border: 1px solid var(--cyan); }
.hx.e { background: color-mix(in srgb, var(--pink) 45%, transparent); box-shadow: 0 0 18px -2px var(--pink); border: 1px solid var(--pink); animation: hx-flash 1.6s ease-in-out infinite; }
@keyframes hx-flash { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.sc-hexwrap .pin { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan); bottom: 24%; left: 22%; z-index: 3; }
.sc-hexwrap .pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid var(--cyan); opacity: .6; animation: pulse 2s ease-in-out infinite; }
.sc-foot { display: flex; gap: 8px; margin-top: 14px; }
.sc-stat { flex: 1; background: rgba(255,255,255,.03); border: 1px solid var(--stroke); border-radius: 12px; padding: 10px; text-align: center; }
.sc-stat .v { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--accent, var(--cyan)); }
.sc-stat .k { font-size: 10px; color: var(--text-45); margin-top: 3px; letter-spacing: .04em; }

/* ── 2. Achievements / Hall of Fame grid ────────────────── */
.sc-ach { --accent: var(--pink); }
.ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ach { aspect-ratio: 1; border-radius: 16px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px; border: 1px solid var(--stroke); background: rgba(255,255,255,.025);
  position: relative; transition: transform .25s; }
.ach .ico { width: 26px; height: 26px; stroke: var(--ac, var(--gold)); }
.ach .xp { font-family: var(--font-mono); font-size: 10px; color: var(--ac, var(--gold)); font-weight: 700; }
.ach.unlocked { border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  background: color-mix(in srgb, var(--ac) 12%, transparent); box-shadow: 0 0 26px -10px var(--ac); }
.ach.locked { opacity: .42; }
.ach.locked .xp { color: var(--text-45); }
.ach.locked::after { content: ""; position: absolute; top: 8px; right: 8px; width: 12px; height: 12px;
  border: 1.6px solid var(--text-45); border-radius: 3px; box-shadow: inset 0 -4px 0 -1px var(--text-45); }
.sc-ach .a1 { --ac: var(--gold); } .sc-ach .a2 { --ac: var(--cyan); } .sc-ach .a3 { --ac: var(--green); }
.sc-ach .a4 { --ac: var(--pink); } .sc-ach .a5 { --ac: var(--purple); } .sc-ach .a6 { --ac: var(--gold); }

/* ── 3. Leaderboard widget ──────────────────────────────── */
.sc-lb { --accent: var(--cyan); }
.lb-tabs { display: flex; gap: 5px; background: rgba(0,0,0,.3); border: 1px solid var(--stroke); border-radius: 11px; padding: 4px; margin-bottom: 12px; }
.lb-tabs span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 11px; padding: 7px 0; border-radius: 8px; color: var(--text-45); }
.lb-tabs span.on { background: var(--cyan); color: #06060e; font-weight: 700; }
.lb-row { display: grid; grid-template-columns: 26px 32px 1fr auto; align-items: center; gap: 11px; padding: 9px 8px; border-radius: 11px; }
.lb-row + .lb-row { margin-top: 2px; }
.lb-row.me { background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
.lb-rank { font-family: var(--font-display); font-weight: 700; text-align: center; color: var(--text-45); font-size: 14px; }
.lb-row.top .lb-rank { color: var(--gold); }
.lb-av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #06060e; }
.lb-name { font-size: 13.5px; font-weight: 600; }
.lb-name small { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--text-45); font-weight: 400; }
.lb-pts { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--cyan); }

/* ── 4. Cinematic frame + filmstrip ─────────────────────── */
.sc-cine { --accent: var(--gold); }
.cine-stage { position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; border: 1px solid var(--stroke);
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255,215,0,.16), transparent 60%),
    radial-gradient(120% 80% at 80% 90%, rgba(0,220,255,.18), transparent 60%),
    repeating-linear-gradient(45deg, #0c0c1c, #0c0c1c 12px, #0e0e22 12px, #0e0e22 24px); }
.cine-route { position: absolute; inset: 0; }
.cine-route path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--gold)); stroke-dasharray: 5 8; }
.cine-play { position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255,215,0,.18); border: 2px solid var(--gold); display: grid; place-items: center;
  animation: pulse 2.2s ease-in-out infinite; }
.cine-play::after { content: ""; border-left: 17px solid var(--gold); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 5px; }
.cine-dur { position: absolute; top: 12px; right: 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: #fff; background: rgba(0,0,0,.55); padding: 4px 9px; border-radius: 8px; }
.cine-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.18); }
.cine-bar::before { content: ""; position: absolute; inset: 0 62% 0 0; background: var(--gold); border-radius: 4px; box-shadow: 0 0 8px var(--gold); }
.cine-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.cine-strip i { aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--stroke);
  background: linear-gradient(150deg, rgba(255,215,0,.14), rgba(0,220,255,.12)); }
.cine-strip i:nth-child(2) { background: linear-gradient(150deg, rgba(0,220,255,.16), rgba(170,68,255,.12)); }
.cine-strip i:nth-child(3) { background: linear-gradient(150deg, rgba(57,255,20,.14), rgba(0,220,255,.12)); }
.cine-strip i.cur { outline: 2px solid var(--gold); }

/* ── 5. Community feed ──────────────────────────────────── */
.sc-feed { --accent: var(--purple); }
.feed-card { display: flex; gap: 11px; align-items: flex-start; padding: 12px; border-radius: 14px;
  border: 1px solid var(--stroke); background: rgba(255,255,255,.025); margin-bottom: 10px; }
.feed-card:last-child { margin-bottom: 0; }
.feed-av { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-weight: 700; color: #06060e; font-size: 14px; }
.feed-body { font-size: 13px; line-height: 1.4; color: var(--text-70); }
.feed-body b { color: #fff; font-weight: 600; }
.feed-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-45); margin-top: 4px; display: flex; gap: 10px; }
.feed-card.alert { border-color: color-mix(in srgb, var(--pink) 50%, transparent); background: color-mix(in srgb, var(--pink) 10%, transparent); }
.feed-card.alert .feed-av { background: var(--pink); }
.feed-card.alert .ico { width: 20px; height: 20px; stroke: #06060e; }

/* avatar colour helpers */
.av-cyan { background: linear-gradient(135deg, var(--cyan), #2a8cff); }
.av-green { background: linear-gradient(135deg, var(--green), var(--cyan)); }
.av-gold { background: linear-gradient(135deg, var(--gold), #ff9e3d); }
.av-pink { background: linear-gradient(135deg, var(--pink), var(--purple)); }
.av-purple { background: linear-gradient(135deg, var(--purple), #6a5cff); }

@media (max-width: 820px) { .sc-panel { max-width: 420px; margin-inline: auto; } }

/* ── Clean empty media placeholder (awaiting real phone screenshots) ── */
.shot-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 22px;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(0, 220, 255, 0.07), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 10px, transparent 10px 20px),
    #0a0b16;
}
.shot-empty .glyph {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  border: 1px solid var(--stroke-2); background: rgba(255,255,255,.03);
}
.shot-empty .glyph svg { width: 22px; height: 22px; stroke: var(--accent, var(--cyan)); }
.shot-empty .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-45); }
.shot-empty .ratio { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: color-mix(in srgb, var(--accent, var(--cyan)) 75%, white 10%);
  border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 35%, transparent); border-radius: 6px; padding: 3px 8px; }
.shot-empty .dots { display: flex; gap: 5px; }
.shot-empty .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-45); opacity: .5; animation: se-pulse 1.4s ease-in-out infinite; }
.shot-empty .dots i:nth-child(2) { animation-delay: .2s; } .shot-empty .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes se-pulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

/* ── Vertical 9:16 screenshot placeholder (territory / hall of fame / cinematic / leaderboard) ── */
.shot16 {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 9 / 16; margin-inline: auto;
  border-radius: 28px; overflow: hidden; border: 1px solid var(--stroke-2); will-change: transform;
  box-shadow: 0 32px 80px -34px rgba(0, 0, 0, 0.75), 0 0 80px -26px var(--accent, var(--cyan));
}
.shot16 .shot-empty { background:
  radial-gradient(120% 90% at 50% 16%, color-mix(in srgb, var(--accent, var(--cyan)) 12%, transparent), transparent 60%),
  repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 10px, transparent 10px 20px),
  #0a0b16; }
.shot16 .glyph svg { stroke: var(--accent, var(--cyan)); }
.shot16::after { /* tilt glare */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.12), transparent 50%);
  opacity: 0; transition: opacity .25s;
}
.shot16.is-tilting::after { opacity: 1; }