.character-panel {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 1500;
  --summary-accent: var(--accent-color);
  --summary-bg: var(--bg-color);
  --summary-accent-glow: color-mix(in srgb, var(--summary-accent) 16%, #000);
  --summary-accent-dark: color-mix(in srgb, var(--summary-accent) 2%, #000);
  --summary-parallax-x: 0px;
  --summary-parallax-y: 0px;
  --summary-shadow-parallax-x: 0px;
  --summary-shadow-parallax-y: 0px;
  --summary-spot-bg-x: 0px;
  --summary-spot-bg-y: 0px;
  --summary-spot-fig-x: 0px;
  --summary-spot-fig-y: 0px;
}

.character-panel.active {
  opacity: 1;
  pointer-events: auto;
}

.character-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 45% 40%, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.character-panel.active::before {
  opacity: 1;
}

.character-summary-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 0;
  border-radius: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--summary-bg) 82%, #000);
  box-shadow: none;
  transform: none;
  transition: none;
  isolation: isolate;
  contain: layout paint;
  transform: translateZ(0);
  touch-action: none;
  --summary-parallax-x: 0px;
  --summary-parallax-y: 0px;
  --summary-spot-bg-x: 0px;
  --summary-spot-bg-y: 0px;
  --summary-spot-fig-x: 0px;
  --summary-spot-fig-y: 0px;
  --summary-spot-angle: 0rad;
  --summary-spot-fig-angle: 0rad;
  --summary-entry-x: 0px;
  --summary-entry-y: 0px;
  z-index: 1;
}

.character-panel.active .character-summary-card {
  transform: none;
}

.summary-close,
.summary-to-profile {
  position: absolute;
  top: calc(8vh + 60px);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s ease, background 0.2s ease;
}

.summary-close {
  right: 18px;
}

.summary-to-profile {
  right: 62px;
}

.summary-close:hover,
.summary-to-profile:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
}

.summary-art {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 30% 30%, var(--summary-accent-glow), var(--summary-accent-dark));
  --summary-split-slant: 90px;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--summary-split-slant)) 100%, 0 100%);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  pointer-events: none;
}

.summary-radial-light {
  position: absolute;
  left: 50%;
  bottom: -20%;
  width: 1000px;
  height: 1000px;
  transform: translate(-50%, 40%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 207, 230, 0.6) 0%,
    rgba(255, 150, 200, 0) 70%,
    rgba(0, 0, 0, 0) 75%
  );
  opacity: 0.45;
  pointer-events: none;
  z-index: 5;
}

.summary-spot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform;
  backface-visibility: hidden;
  z-index: 1;
}

.summary-spot-bg {
  mix-blend-mode: screen;
  opacity: 0.45;
  transform: none;
  transition: transform 0.25s ease;
}

.summary-spot-fig {
  mix-blend-mode: screen;
  opacity: 0.5;
  transform: none;
  transition: transform 0.25s ease;
  z-index: 4;
}

.summary-spot-orbit {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform: rotate(var(--spot-parallax-angle, 0rad));
  transition: transform 0.25s ease;
  will-change: transform;
  display: block;
}

.summary-spot {
  position: absolute;
  left: var(--spot-x);
  top: var(--spot-y);
  width: var(--spot-w);
  height: var(--spot-h);
  transform: translate(-50%, -50%) rotate(var(--spot-rot));
  transform-origin: 50% 50%;
  border-radius: 999px;
  filter: blur(0.25px);
  overflow: hidden;
  pointer-events: none;
}

.summary-spot::before,
.summary-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.summary-spot::before {
  background:
    radial-gradient(
      ellipse at 50% 55%,
      rgba(255, 121, 193, 0.75) 0%,
      rgba(255, 160, 210, 0) 68%
    ),
    radial-gradient(
      circle at 55% 45%,
      rgba(0, 208, 255, 0.75) 0%,
      rgba(90, 210, 255, 0) 42%
    );
  mix-blend-mode: screen;
  opacity: 0.92;
  filter: blur(0.05px);
  inset: -20%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 68%);
          mask-image: radial-gradient(ellipse at 50% 55%, #000 0%, transparent 68%);
}

.summary-spot::after {
  content: none;
}

.debug-spots .summary-spot {
  outline: 1px dashed rgba(255, 255, 255, 0.6);
  filter: none;
  overflow: visible;
}

.debug-spots .summary-spot::after {
  content: attr(data-label);
  position: absolute;
  inset: auto;
  right: auto;
  bottom: auto;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  mix-blend-mode: normal;
}

.summary-spot-fig .summary-spot {
  filter: blur(0.5px);
}

.summary-spot-bg .s1,
.summary-spot-fig .s1 {
  --spot-parallax-angle: var(--summary-spot-bg-1-angle);
  --spot-x: 8%;
  --spot-y: 76%;
  --spot-w: 48px;
  --spot-h: 170px;
}

.summary-spot-fig .s1 {
  --spot-parallax-angle: var(--summary-spot-fig-1-angle);
}

.summary-spot-bg .s2,
.summary-spot-fig .s2 {
  --spot-parallax-angle: var(--summary-spot-bg-2-angle);
  --spot-x: 42%;
  --spot-y: 46%;
  --spot-w: 58px;
  --spot-h: 220px;
}

.summary-spot-fig .s2 {
  --spot-parallax-angle: var(--summary-spot-fig-2-angle);
}

.summary-spot-bg .s3,
.summary-spot-fig .s3 {
  --spot-parallax-angle: var(--summary-spot-bg-3-angle);
  --spot-x: 70%;
  --spot-y: 18%;
  --spot-w: 44px;
  --spot-h: 190px;
}

.summary-spot-fig .s3 {
  --spot-parallax-angle: var(--summary-spot-fig-3-angle);
}

.summary-spot-bg .s4,
.summary-spot-fig .s4 {
  --spot-parallax-angle: var(--summary-spot-bg-4-angle);
  --spot-x: 56%;
  --spot-y: 70%;
  --spot-w: 42px;
  --spot-h: 150px;
}

.summary-spot-fig .s4 {
  --spot-parallax-angle: var(--summary-spot-fig-4-angle);
}

.summary-spot-bg .s5,
.summary-spot-fig .s5 {
  --spot-parallax-angle: var(--summary-spot-bg-5-angle);
  --spot-x: 6%;
  --spot-y: 30%;
  --spot-w: 54px;
  --spot-h: 210px;
}

.summary-spot-fig .s5 {
  --spot-parallax-angle: var(--summary-spot-fig-5-angle);
}

.summary-spot-bg .s6,
.summary-spot-fig .s6 {
  --spot-parallax-angle: var(--summary-spot-bg-6-angle);
  --spot-x: 92%;
  --spot-y: 52%;
  --spot-w: 72px;
  --spot-h: 280px;
}

.summary-spot-fig .s6 {
  --spot-parallax-angle: var(--summary-spot-fig-6-angle);
}

.summary-spot-bg .s7,
.summary-spot-fig .s7 {
  --spot-parallax-angle: var(--summary-spot-bg-7-angle);
  --spot-x: 18%;
  --spot-y: 62%;
  --spot-w: 46px;
  --spot-h: 160px;
}

.summary-spot-fig .s7 {
  --spot-parallax-angle: var(--summary-spot-fig-7-angle);
}

.summary-spot-bg .s8,
.summary-spot-fig .s8 {
  --spot-parallax-angle: var(--summary-spot-bg-8-angle);
  --spot-x: 30%;
  --spot-y: 44%;
  --spot-w: 52px;
  --spot-h: 210px;
}

.summary-spot-fig .s8 {
  --spot-parallax-angle: var(--summary-spot-fig-8-angle);
}


.summary-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35));
  pointer-events: none;
  z-index: 3;
}

.summary-art-image {
  position: absolute;
  inset: 0;
  background-image: var(--summary-art-image, none);
  background-size: cover;
  background-position: center;
  --summary-shadow-color: transparent;
  filter: saturate(0.9) contrast(1.05) drop-shadow(calc(20px + var(--summary-shadow-parallax-x)) calc(20px + var(--summary-shadow-parallax-y)) 0 var(--summary-shadow-color));
  transform: translate3d(calc(var(--summary-parallax-x) + var(--summary-entry-x)), calc(var(--summary-parallax-y) + var(--summary-entry-y)), 0) scale(1.14);
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.35s ease, filter 0.35s ease;
  z-index: 2;
  pointer-events: none;
}

.summary-entry .summary-art-image {
  opacity: 0;
  filter: brightness(0) drop-shadow(calc(20px + var(--summary-shadow-parallax-x)) calc(20px + var(--summary-shadow-parallax-y)) 0 var(--summary-shadow-color));
}

.summary-shadow-in .summary-art-image {
  --summary-shadow-color: var(--summary-accent);
}

.summary-art-image .summary-spot-layer {
  inset: -6%;
}

.summary-content {
  padding: calc(8vh + 64px) 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--summary-bg) 82%, #000);
}

.summary-kicker {
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.6);
}

.summary-name {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem;
  color: #fff;
}

.summary-tagline {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.summary-block-title {
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}

.summary-block-body {
  color: rgba(255, 255, 255, 0.85);
}

.summary-updates-list {
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
}

.summary-signatures-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.summary-pill {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--summary-accent) 22%, transparent);
  color: color-mix(in srgb, var(--summary-accent) 35%, #ffffff);
  font-size: 0.78rem;
}

.summary-stats-graph {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 2.4rem 0 0.6rem;
  pointer-events: auto;
}

.summary-stats-graph svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.summary-stats-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.5;
}

.summary-stats-fill {
  fill: color-mix(in srgb, var(--summary-accent) 45%, transparent);
  stroke: color-mix(in srgb, var(--summary-accent) 80%, transparent);
  stroke-width: 1.5;
}

.summary-stats-ring {
  transition: opacity 0.2s ease;
}

.summary-stats-labels {
  position: absolute;
  inset: 0;
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
  z-index: 2;
  pointer-events: auto;
}

.summary-stats-labels span {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.summary-stats-labels span.is-zero {
  color: rgba(180, 190, 205, 0.45);
}

.summary-stats-labels span.is-max {
  color: var(--summary-accent);
}

.summary-stats-graph.is-substats {
  cursor: pointer;
}

.summary-stats-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: rgba(8, 14, 22, 0.92);
  border: 1px solid color-mix(in srgb, var(--summary-accent) 45%, transparent);
  color: rgba(230, 235, 245, 0.92);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 10050;
}

.summary-stats-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, -120%);
}

@media (max-width: 800px) {
  .character-summary-card {
    grid-template-columns: 1fr;
    height: min(680px, 78vh);
  }

  .summary-art {
    min-height: 38vh;
  }
}