/* The four benchmark suites share one orbital view, each with its own nebula. */
.leaderboard-orbit {
  --orbit-accent: #ebc18a;
  --orbit-accent-rgb: 235, 193, 138;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #26313f;
  border-radius: 20px;
  background: #050a11;
  color: #f5f6fa;
  box-shadow: 0 24px 60px -30px rgba(6, 13, 29, .4), 0 2px 8px rgba(5, 12, 20, .12);
  font-family: var(--mv-font);
  -webkit-font-smoothing: antialiased;
}

.leaderboard-orbit__stage {
  position: relative;
  height: clamp(510px, 48vw, 640px);
  overflow: hidden;
  isolation: isolate;
  cursor: grab;
  touch-action: pan-y;
}

.leaderboard-orbit__stage.is-dragging { cursor: grabbing; }
.leaderboard-orbit__nebula,
.leaderboard-orbit__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.leaderboard-orbit__nebula {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.leaderboard-orbit__vignette {
  z-index: 1;
  background: linear-gradient(180deg, rgba(3, 7, 14, .8), transparent 25%, transparent 74%, #050a11 100%),
    linear-gradient(90deg, rgba(3,7,14,.22), transparent 20%, transparent 80%, rgba(3,7,14,.22));
}

.leaderboard-orbit__head {
  position: absolute;
  z-index: 110;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 24px;
  padding: 31px 34px;
  pointer-events: none;
}

.leaderboard-orbit__context {
  display: grid;
  gap: 8px;
  padding-top: 2px;
  text-align: right;
}

.leaderboard-orbit__context strong {
  color: var(--orbit-accent);
  font: 500 12px/1.4 var(--mv-font);
  letter-spacing: .015em;
}

.leaderboard-orbit__context span {
  color: #9da9ba;
  font: 400 11px/1.4 var(--mv-font);
}

.leaderboard-orbit__context b { color: #e9edf5; font-weight: 500; }

.leaderboard-orbit__space {
  position: absolute;
  z-index: 2;
  inset: var(--orbit-offset, -3%) 0 calc(-1 * var(--orbit-offset, -3%));
}

.leaderboard-orbit__canvas,
.leaderboard-orbit__fallback-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.leaderboard-orbit__fallback-paths ellipse {
  fill: none;
  stroke: var(--orbit-accent);
  stroke-width: .6;
  opacity: .3;
}
.has-webgl .leaderboard-orbit__fallback-paths { display: none; }

.leaderboard-orbit__planet {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: max(40px, var(--planet-size));
  height: max(40px, var(--planet-size));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: white;
  cursor: pointer;
  transform: translate(-50%, -50%);
  -webkit-tap-highlight-color: transparent;
}

.leaderboard-orbit__emblem {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--planet-size);
  height: var(--planet-size);
  overflow: hidden;
  border: 1px solid rgba(234, 241, 255, .65);
  border-radius: 50%;
  background: #f4f5f7;
  box-shadow: 0 0 10px rgba(var(--orbit-accent-rgb), .12), 4px 5px 12px rgba(0, 0, 0, .6);
  transition: box-shadow 180ms ease;
}

.leaderboard-orbit__emblem::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.08), transparent 48%, rgba(20,33,51,.15) 77%, rgba(3,10,23,.55) 100%);
  box-shadow: inset 1px 1px 3px rgba(255,255,255,.7), inset -1px -1px 4px rgba(11,25,49,.18);
  content: '';
  pointer-events: none;
}

.leaderboard-orbit__emblem img {
  display: block;
  width: 85%;
  height: 85%;
  object-fit: contain;
  user-select: none;
}
.leaderboard-orbit__emblem.is-inset img { width: 74%; height: 74%; }
.leaderboard-orbit__emblem.is-crop-left img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.leaderboard-orbit__emblem > span { color: #172538; font: 600 18px var(--mv-font); }

.leaderboard-orbit__rank-badge {
  position: absolute;
  right: calc((100% - var(--planet-size)) / 2 - 3px);
  bottom: calc((100% - var(--planet-size)) / 2 - 3px);
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid rgba(var(--orbit-accent-rgb), .5);
  border-radius: 50%;
  background: #0a111e;
  color: #d5ddea;
  font: 500 8px/1 'JetBrains Mono', monospace;
}

.leaderboard-orbit__planet.is-top .leaderboard-orbit__rank-badge {
  width: 18px;
  height: 18px;
  border-color: var(--orbit-accent);
  background: var(--orbit-accent);
  color: #111820;
  font-size: 9px;
}

.leaderboard-orbit__planet::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--planet-size) + 12px);
  height: calc(var(--planet-size) + 12px);
  border: 1px solid rgba(var(--orbit-accent-rgb), .65);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity 180ms ease, transform 180ms ease;
  content: '';
  pointer-events: none;
}

.leaderboard-orbit__planet.is-active::before,
.leaderboard-orbit__planet.is-hovered::before,
.leaderboard-orbit__planet:focus-visible::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.leaderboard-orbit__planet:focus-visible { outline: 2px solid #f5f8ff; outline-offset: 9px; }
.leaderboard-orbit__planet.is-active .leaderboard-orbit__emblem,
.leaderboard-orbit__planet.is-hovered .leaderboard-orbit__emblem {
  box-shadow: 0 0 25px rgba(var(--orbit-accent-rgb), .44), 4px 5px 12px rgba(0,0,0,.6);
}

.leaderboard-orbit__planet-label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px;
  width: max-content;
  max-width: min(260px, calc(100vw - 64px));
  border: 1px solid rgba(var(--orbit-accent-rgb), .15);
  border-radius: 6px;
  background: rgba(3, 8, 16, .9);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  color: #f3f5fa;
  font: 500 11px/1.3 var(--mv-font);
  white-space: nowrap;
  text-shadow: 0 2px 7px #000;
  opacity: 0;
  transform: translateX(calc(-50% + var(--label-shift, 0px)));
  pointer-events: none;
  transition: opacity 150ms ease;
}

.leaderboard-orbit__planet-label::before {
  position: absolute;
  bottom: 100%;
  left: clamp(8px, calc(50% - var(--label-shift, 0px)), calc(100% - 8px));
  width: 1px;
  height: 10px;
  background: rgba(var(--orbit-accent-rgb), .55);
  content: '';
}
.leaderboard-orbit__planet-label > span { overflow: hidden; text-overflow: ellipsis; }
.leaderboard-orbit__planet-label small { flex: none; color: var(--orbit-accent); font: 400 9px/1.2 'JetBrains Mono', monospace; }
.leaderboard-orbit__planet.is-label-visible .leaderboard-orbit__planet-label { opacity: 1; }
.leaderboard-orbit__planet.is-label-above .leaderboard-orbit__planet-label { top: auto; bottom: calc(100% + 10px); }
.leaderboard-orbit__planet.is-label-above .leaderboard-orbit__planet-label::before { top: 100%; bottom: auto; }

.leaderboard-orbit__hint {
  position: absolute;
  z-index: 110;
  left: 34px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #9ca9bb;
  font: 400 11px/1.3 var(--mv-font);
  pointer-events: none;
}
.leaderboard-orbit__drag-mark { display: flex; gap: 1px; color: var(--orbit-accent); }
.leaderboard-orbit__drag-mark svg { width: 12px; height: 12px; }
.leaderboard-orbit__tools { position: absolute; z-index: 110; right: 30px; bottom: 15px; display: flex; align-items: center; gap: 15px; }
.leaderboard-orbit__motion-state { display: flex; align-items: center; gap: 6px; color: #aebaca; font: 400 10px/1.3 var(--mv-font); }
.leaderboard-orbit__motion-state::before { width: 4px; height: 4px; border-radius: 50%; background: var(--orbit-accent); box-shadow: 0 0 6px var(--orbit-accent); content: ''; }
.is-paused .leaderboard-orbit__motion-state::before { background: #6d788a; box-shadow: none; }
.is-inspecting .leaderboard-orbit__motion-state::before { opacity: .6; box-shadow: none; }
.leaderboard-orbit__tool-group { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(170,190,219,.19); border-radius: 24px; background: rgba(8,16,29,.65); backdrop-filter: blur(12px); }
.leaderboard-orbit__tool-group button,
.leaderboard-orbit__stepper button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: #c5cedd; cursor: pointer; transition: color 140ms ease, background 140ms ease, transform 140ms ease; }
.leaderboard-orbit__tool-group button:hover,
.leaderboard-orbit__stepper button:hover { color: #fff; background: rgba(var(--orbit-accent-rgb), .13); }
.leaderboard-orbit__tool-group button:disabled { opacity: .3; background: none; cursor: default; }
.leaderboard-orbit__tool-group button:active:not(:disabled),
.leaderboard-orbit__stepper button:active { transform: scale(.9); background: rgba(var(--orbit-accent-rgb), .18); }
.leaderboard-orbit__tool-group svg,
.leaderboard-orbit__stepper svg { width: 16px; height: 16px; }
.leaderboard-orbit__tool-divider { width: 1px; height: 14px; margin: 0 2px; background: rgba(178,199,225,.2); }

.leaderboard-orbit__dock {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  min-height: 0;
  margin: 0 30px;
  padding: 6px 4px;
  border-top: 1px solid rgba(var(--orbit-accent-rgb), .23);
  background: #050a11;
}
.leaderboard-orbit__rank { display: flex; align-items: baseline; gap: 6px; padding-right: 12px; border-right: 1px solid rgba(165,186,215,.15); }
.leaderboard-orbit__rank > span,
.leaderboard-orbit__score > span { display: block; margin-bottom: 0; color: #94a0b2; font: 500 8px/1 var(--mv-font); letter-spacing: .1em; text-transform: uppercase; }
.leaderboard-orbit__rank > div { display: flex; align-items: baseline; gap: 4px; }
.leaderboard-orbit__rank strong { color: var(--orbit-accent); font: 400 16px/1 var(--mv-font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.leaderboard-orbit__rank small { color: #748296; font: 400 10px/1 'JetBrains Mono', monospace; white-space: nowrap; }
.leaderboard-orbit__selection { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.leaderboard-orbit__selection-head { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.leaderboard-orbit__picker { position: relative; display: inline-flex; align-items: center; max-width: 100%; }
.leaderboard-orbit__picker select { width: 100%; max-width: 100%; min-height: 0; padding: 0 20px 0 0; border: 0; appearance: none; background: transparent; color: #f0f3f9; font: 500 13px/1.2 var(--mv-font); letter-spacing: -.025em; text-overflow: ellipsis; cursor: pointer; }
.leaderboard-orbit__picker select option { background: #101c2c; color: #fff; font: 400 14px/1.5 var(--mv-font); }
.leaderboard-orbit__picker svg { position: absolute; right: 0; width: 16px; height: 16px; color: #909eb1; pointer-events: none; }
.leaderboard-orbit__org { flex: 1 1 auto; min-width: 0; margin-top: 0; overflow: hidden; color: #93a0b3; font: 400 10px/1 var(--mv-font); text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-orbit__stepper { display: flex; gap: 3px; }
.leaderboard-orbit__stepper button { border: 1px solid rgba(163,186,217,.18); width: 24px; height: 24px; }
.leaderboard-orbit__score { display: flex; align-items: baseline; gap: 6px; padding-left: 12px; border-left: 1px solid rgba(165,186,215,.15); }
.leaderboard-orbit__score strong { color: #f3f5fb; font: 400 16px/1 var(--mv-font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.leaderboard-orbit__view { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 0; padding: 4px 10px; border: 1px solid rgba(var(--orbit-accent-rgb), .4); border-radius: 30px; background: rgba(var(--orbit-accent-rgb), .05); color: var(--orbit-accent); font: 500 10px/1.2 var(--mv-font); cursor: pointer; transition: background 160ms ease; }
.leaderboard-orbit__view svg { width: 17px; height: 17px; }
.leaderboard-orbit__view:hover { background: rgba(var(--orbit-accent-rgb), .16); }
.leaderboard-orbit__view:active { background: rgba(var(--orbit-accent-rgb), .24); }
.leaderboard-orbit :is(button,select):focus-visible { outline: 2px solid var(--orbit-accent); outline-offset: 4px; }
.leaderboard-orbit__announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.leaderboard-orbit__foot { display: flex; justify-content: space-between; gap: 20px; padding: 6px 34px 8px; border-top: 1px solid rgba(165,186,215,.08); background: #050a11; color: #748296; font: 400 9px/1.45 var(--mv-font); }
.leaderboard-orbit__foot time { flex: none; }

@media (max-width: 1000px) {
  .leaderboard-orbit__dock { grid-template-columns: auto minmax(0,1fr) auto auto; gap: 12px; }
  .leaderboard-orbit__stepper { display: none; }
}

@media (max-width: 700px) {
  .leaderboard-orbit { border-radius: 16px; }
  .leaderboard-orbit__stage { height: 465px; }
  .leaderboard-orbit__head { padding: 23px 22px; gap: 12px; }
  .leaderboard-orbit__context { max-width: 110px; }
  .leaderboard-orbit__context strong { font-size: 10px; }
  .leaderboard-orbit__context span { font-size: 9px; }
  .leaderboard-orbit__nebula { background-size: auto 100%; }
  .leaderboard-orbit__hint { left: 21px; bottom: 60px; font-size: 10px; }
  .leaderboard-orbit__tools { left: 20px; right: 20px; bottom: 14px; justify-content: space-between; flex-direction: row-reverse; }
  .leaderboard-orbit__planet-label { font-size: 10px; max-width: 180px; }
  .leaderboard-orbit__rank-badge { width: 14px; min-width: 14px; height: 14px; font-size: 8px; }
  .leaderboard-orbit__planet.is-top .leaderboard-orbit__rank-badge { width: 15px; height: 15px; font-size: 8px; }
  .leaderboard-orbit__dock { grid-template-columns: auto minmax(0,1fr) auto 32px; gap: 8px; margin: 0 16px; padding: 5px 0; }
  .leaderboard-orbit__rank strong { font-size: 15px; }
  .leaderboard-orbit__rank > span { font-size: 7px; letter-spacing: 0; }
  .leaderboard-orbit__rank > div { gap: 4px; }
  .leaderboard-orbit__rank small { font-size: 8px; }
  .leaderboard-orbit__picker select { padding-right: 18px; font-size: 14px; }
  .leaderboard-orbit__picker svg { width: 12px; height: 12px; }
  .leaderboard-orbit__score { border: 0; padding: 0; }
  .leaderboard-orbit__score > span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
  .leaderboard-orbit__score strong { font-size: 15px; }
  .leaderboard-orbit__view { width: 32px; padding: 6px; }
  .leaderboard-orbit__view span { display: none; }
  .leaderboard-orbit__foot { padding: 5px 16px 7px; }
  .leaderboard-orbit__foot time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .leaderboard-orbit *, .leaderboard-orbit *::before { transition: none !important; }
}
