/* ═══════════════════════════════════════════════════════════════════════════
   CHARACTER — Settings → Character, the home rail's character slide and the
   leaderboard podium. Logic in js/character.js.

   Every class is `cc-` prefixed (free in every other stylesheet). Loads after
   settings.css and reuses its primitives — .st-panel, .st-cosm, .st-opts,
   .st-sw, .st-btn — rather than redefining them, and home-v2.css's --hv-a-*
   accent tokens. Nothing hardcodes purple, so cosmetics keep applying.

   ⚠ Same rule as the other S2 sheets: never give a `.page` element a top-level
   `display` rule here (see the note at the top of profile.css).
   ═══════════════════════════════════════════════════════════════════════════ */

.cc-px { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

/* ── the editor ── */
.cc-wrap { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
.cc-stage-col { padding: 20px; border-right: 1px solid rgba(255,255,255,.055); }
.cc-stage {
  position: relative; height: 300px; border-radius: 12px; overflow: hidden;
  display: grid; place-items: end center; border: 1px solid var(--border);
  background:
    radial-gradient(120% 70% at 50% 100%, var(--hv-a-32), transparent 60%),
    linear-gradient(180deg, #191927 0%, #10101a 100%);
}
.cc-stage::before {
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 30%, #000 100%);
}
.cc-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 26px; width: 120px; height: 18px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
}
.cc-stage canvas { position: relative; z-index: 1; margin-bottom: 6px; }
.cc-dir {
  position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; margin-top: -17px;
  border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(10,10,16,.6);
  color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .15s;
}
.cc-dir:hover { background: var(--hv-a-55); }
.cc-dir svg { width: 15px; height: 15px; }
.cc-dir.l { left: 10px; }
.cc-dir.r { right: 10px; }
.cc-saved {
  position: absolute; top: 10px; left: 10px; z-index: 2; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px;
  background: rgba(10,10,16,.6); color: var(--text-3); border: 1px solid var(--border);
}
.cc-saved.dirty { color: #ffd27a; border-color: rgba(255,210,122,.35); }
.cc-anims { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cc-anim {
  font: 600 11.5px var(--font-body); padding: 5px 10px; border-radius: 99px; cursor: pointer;
  color: var(--text-2); background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.cc-anim:hover { color: var(--text); }
.cc-anim.on { color: #fff; background: var(--accent-dim); border-color: var(--hv-a-55); }
.cc-anim.dance { border-style: dashed; }
.cc-acts { display: flex; gap: 8px; margin-top: 14px; }
.cc-acts .st-btn { flex: 1; justify-content: center; }
.cc-err { margin-top: 10px; font-size: 12px; color: #ff8a8a; }
.cc-err[hidden] { display: none; }

.cc-edit { min-width: 0; }
.cc-tabs { display: flex; gap: 6px; padding: 16px 20px 0; }
.cc-tab {
  font: 700 13px var(--font-body); padding: 8px 14px; border-radius: 10px; cursor: pointer;
  color: var(--text-2); background: none; border: 1px solid transparent;
}
.cc-tab:hover { color: var(--text); }
.cc-tab.on { color: #fff; background: rgba(255,255,255,.05); border-color: var(--border); }
.cc-pane { display: none; }
.cc-pane.on { display: block; }

.cc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.cc-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 7px;
  border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.03);
  border: 1px solid var(--border); color: var(--text-2); font: 600 11px var(--font-body);
  transition: transform .12s, background .12s, border-color .12s;
}
.cc-opt:hover { transform: translateY(-1px); background: var(--surface-hover); color: var(--text); }
.cc-opt.on { color: #fff; background: var(--accent-dim); border-color: var(--hv-a-55); }
.cc-th { height: 64px; display: grid; place-items: center; }
.cc-none { height: 64px; display: grid; place-items: center; font-size: 20px; opacity: .35; }
.cc-opt-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.cc-foot {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.055); font-size: 12px; color: var(--text-3);
}
.cc-sp { margin-left: auto; }
.cc-link {
  font: inherit; color: var(--text-2); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.2);
}
.cc-link:hover { color: var(--text); }
.cc-link[hidden] { display: none; }

@media (max-width: 860px) {
  .cc-wrap { grid-template-columns: minmax(0, 1fr); }
  .cc-stage-col { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.055); }
  .cc-stage { height: 250px; }
  .cc-sp { margin-left: 0; }
}

/* ── credits sheet ── */
.cc-cr {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6);
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.cc-cr.on { display: flex; }
.cc-cr-in {
  background: var(--hv-panel); border: 1px solid var(--border); border-radius: 14px;
  max-width: 680px; width: 100%; max-height: 80vh; overflow: auto; padding: 20px 22px;
}
.cc-cr-t { font: 800 20px var(--font-display); margin-bottom: 6px; }
.cc-cr-p { font-size: 13px; color: var(--text-2); margin: 0 0 12px; line-height: 1.5; }
.cc-cr-p a { color: var(--accent); }
.cc-cr-row { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 12.5px; color: var(--text-2); }
.cc-cr-row b { color: var(--text); font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 500; }
.cc-cr-row span { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 2px; }
.cc-cr-x { margin-top: 14px; text-align: right; }

/* ── home rail: the character slide's line-up (#hv-news-chars) ──
   A shared layer like .hv-news-mosaic: hvShow() paints it on the character slide
   and clears it on every other. Above the scrim so the line-up stays bright;
   masked on the left, where the title lives. */
.cc-rail {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: -1;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 34px 38px 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.cc-rail[hidden] { display: none; }
.cc-rail::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 30px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14));
}
.cc-rail-slot { position: relative; flex: none; margin-left: -92px; }
.cc-rail-slot:first-child { margin-left: 0; }
.cc-rail-you, .cc-rail-slot:has(.cc-rail-me) { margin-left: -70px; margin-right: -40px; z-index: 2; }
.cc-rail-ghost { filter: brightness(0) opacity(.55); }
.cc-rail-me { filter: drop-shadow(0 0 18px var(--hv-a-55)); }
.cc-rail-q {
  position: absolute; left: 50%; top: 42px; transform: translateX(-50%);
  font: 800 38px var(--font-display); color: var(--accent);
  text-shadow: 0 0 18px var(--hv-a-55);
}
@media (max-width: 900px) {
  .cc-rail { width: 100%; opacity: .35; padding-right: 10px; }
}

/* ── leaderboard: characters where there's room, photos in the rows ── */
.cc-podium {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end;
  padding: 14px 12px 0; margin-bottom: 6px;
  background: radial-gradient(90% 100% at 50% 100%, rgba(245,197,24,.12), transparent 70%);
}
.cc-pod { display: flex; flex-direction: column; align-items: center; min-width: 0; cursor: pointer; }
.cc-pod canvas { margin-bottom: -4px; }
/* someone without a character stands on their step as their photo */
.cc-pod-av {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin: 40px 0 6px;
  background: var(--accent-dim); border: 2px solid rgba(255,255,255,.12);
}
.cc-pod-nm {
  font: 700 12px var(--font-body); color: var(--text); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px;
}
.cc-pod-xp { font-size: 11px; color: var(--text-3); margin-bottom: 6px; }
.cc-pod.me .cc-pod-nm { color: var(--accent); }
.cc-step {
  width: 100%; border-radius: 8px 8px 0 0; display: grid; place-items: center;
  font: 800 18px var(--font-display); color: rgba(0,0,0,.55);
}
.cc-step.p1 { height: 50px; background: linear-gradient(180deg, #f5c518, #c99a0a); }
.cc-step.p2 { height: 36px; background: linear-gradient(180deg, #d9dde6, #9aa0ad); }
.cc-step.p3 { height: 26px; background: linear-gradient(180deg, #e2995c, #a8612d); }
.cc-mini { flex: none; margin: -6px -2px -6px -4px; }