:root {
  --guardian-resonance-track: rgba(74, 57, 91, 0.5);
  --guardian-resonance-cyan: #73d8df;
  --guardian-resonance-gold: #d9b96c;
  --guardian-resonance-light: #fff1bd;
  --guardian-resonance-border: rgba(205, 170, 91, 0.55);
}

.guardian-resonance-panel {
  margin: 1.5rem 0;
  padding: clamp(1rem, 4vw, 1.4rem);
  border: 1px solid var(--guardian-resonance-border);
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 82% 8%, rgba(115, 216, 223, 0.09), transparent 34%),
    linear-gradient(145deg, rgba(10, 13, 24, 0.98), rgba(18, 10, 27, 0.96));
  box-shadow: inset 0 0 1.75rem rgba(115, 216, 223, 0.035);
}

.guardian-resonance-panel[hidden] {
  display: none;
}

.guardian-resonance-panel__header,
.guardian-resonance-panel__summary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.guardian-resonance-panel__eyebrow {
  margin: 0 0 0.3rem;
  color: var(--guardian-resonance-cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

.guardian-resonance-panel h3 {
  margin: 0;
  color: #e0c47d;
  font-weight: 500;
}

.guardian-resonance-panel__score {
  color: var(--guardian-resonance-gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.guardian-resonance-panel__score strong {
  font-size: clamp(2.2rem, 12vw, 3.5rem);
  font-weight: 400;
}

.guardian-resonance-panel__score span {
  margin-left: 0.15rem;
  font-size: 1rem;
}

.guardian-resonance-panel__summary {
  margin-top: 1rem;
  align-items: baseline;
  color: #ddd5c4;
}

.guardian-resonance-panel__summary strong {
  color: #e1c675;
}

.guardian-resonance-scale {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.3rem;
  margin-top: 0.75rem;
}

.guardian-resonance-scale__segment {
  aspect-ratio: 0.72;
  min-height: 2.25rem;
  border: 1px solid rgba(201, 168, 95, 0.24);
  border-radius: 0.25rem;
  background: rgba(28, 24, 47, 0.7);
}

.guardian-resonance-scale__segment:nth-child(-n+2).is-active {
  background: linear-gradient(180deg, #173876, #2456ad);
  box-shadow: 0 0 0.6rem rgba(49, 102, 230, 0.48);
}

.guardian-resonance-scale__segment:nth-child(n+3):nth-child(-n+4).is-active {
  background: linear-gradient(180deg, #237ca2, #42bed0);
  box-shadow: 0 0 0.65rem rgba(62, 190, 208, 0.48);
}

.guardian-resonance-scale__segment:nth-child(n+5):nth-child(-n+6).is-active {
  background: linear-gradient(180deg, #4bb9b5, #8ee0cb);
  box-shadow: 0 0 0.7rem rgba(131, 212, 213, 0.5);
}

.guardian-resonance-scale__segment:nth-child(n+7):nth-child(-n+8).is-active {
  background: linear-gradient(180deg, #a7ce72, #e3b953);
  box-shadow: 0 0 0.75rem rgba(217, 186, 106, 0.54);
}

.guardian-resonance-scale__segment:nth-child(9).is-active {
  background: linear-gradient(180deg, #dcaa54, #b864c9);
  box-shadow: 0 0 1rem rgba(179, 100, 201, 0.46);
}

.guardian-resonance-scale__segment:nth-child(10).is-active {
  background: linear-gradient(180deg, #fff1be, #8c43cf);
  box-shadow: 0 0 1.1rem rgba(226, 190, 98, 0.65);
}

.guardian-resonance-components {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(205, 170, 91, 0.22);
}

.guardian-resonance-component__heading {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  color: rgba(243, 238, 223, 0.86);
  font-size: 0.86rem;
}

.guardian-resonance-component__heading output {
  color: #e0c77e;
  font-variant-numeric: tabular-nums;
}

.guardian-resonance-component__meter {
  height: 0.45rem;
  margin-top: 0.3rem;
  overflow: hidden;
  border: 1px solid rgba(205, 170, 91, 0.28);
  border-radius: 999px;
  background: var(--guardian-resonance-track);
}

.guardian-resonance-component__meter span {
  display: block;
  width: var(--guardian-component-value);
  height: 100%;
  background: linear-gradient(90deg, #269ccc, #6edbc8 62%, #e0c15e);
}

.guardian-resonance-panel__note {
  margin: 1rem 0 0;
  color: rgba(235, 229, 211, 0.66);
  font-size: 0.76rem;
  line-height: 1.7;
}

@media (max-width: 420px) {
  .guardian-resonance-panel {
    border-radius: 1rem;
  }

  .guardian-resonance-scale {
    gap: 0.2rem;
  }

  .guardian-resonance-scale__segment {
    min-height: 1.9rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .guardian-resonance-scale__segment.is-active {
    animation: guardian-resonance-awaken 540ms ease-out both;
    animation-delay: calc(var(--guardian-segment-index, 0) * 45ms);
  }
}

@keyframes guardian-resonance-awaken {
  from {
    opacity: 0.3;
    transform: translateY(0.25rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.guardian-resonance-panel__interpretation {
  margin: 1rem 0 0;
  color: #e3cf94;
  line-height: 1.8;
  text-align: center;
}

.guardian-resonance-panel__details {
  margin-top: 1rem;
  border-top: 1px solid rgba(205, 170, 91, 0.22);
}

.guardian-resonance-panel__details summary {
  min-height: 44px;
  display: grid;
  place-items: center;
  margin-top: 0.75rem;
  border: 1px solid rgba(205, 170, 91, 0.48);
  border-radius: 999px;
  color: #e4ca7e;
  cursor: pointer;
  list-style: none;
}

.guardian-resonance-panel__details summary::-webkit-details-marker {
  display: none;
}

.guardian-resonance-panel__details summary:focus-visible {
  outline: 2px solid #73d8df;
  outline-offset: 3px;
}

.guardian-resonance-panel__details h4 {
  margin: 1rem 0 0;
  color: #dfc477;
  font-weight: 500;
}



#guardian-additional-action {
  border-color: rgba(73, 220, 218, 0.58);
  background:
    radial-gradient(circle at 50% 20%, rgba(48, 197, 191, 0.2), transparent 58%),
    rgba(6, 32, 37, 0.9);
  color: #c9fffa;
}

#guardian-show-archive {
  border-color: rgba(221, 183, 82, 0.58);
  background:
    radial-gradient(circle at 50% 20%, rgba(205, 164, 65, 0.18), transparent 58%),
    rgba(33, 24, 8, 0.9);
  color: #f4dda0;
}

@media (max-width: 760px) {
  .guardian-result {
    margin-inline: calc(clamp(0rem, 2vw, 0.5rem) * -1);
    padding: 0.75rem;
    border-radius: 1rem;
    background: rgba(3, 7, 13, 0.98);
  }

  .guardian-result__layout {
    gap: 0.9rem;
  }

  .guardian-result__visual {
    padding: 0.45rem;
    border: 1px solid rgba(229, 195, 104, 0.42);
    border-radius: 0.8rem;
    background:
      radial-gradient(circle at center, rgba(29, 98, 68, 0.15), transparent 68%),
      #03070a;
  }

  .guardian-result__image {
    width: min(100%, 29rem);
    max-height: none;
    margin-inline: auto;
    border-radius: 0.65rem;
  }

  .guardian-result__header {
    padding: 0.85rem 0.55rem 0;
  }

  .guardian-result__role,
  .guardian-keywords,
  .guardian-message,
  .guardian-section {
    margin-inline: 0.55rem;
  }

  .guardian-topics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guardian-topics details {
    min-width: 0;
  }

  .guardian-topics details:first-child {
    grid-column: 1 / -1;
  }

  .guardian-topics summary {
    display: grid;
    place-items: center;
    padding: 0.65rem 0.45rem;
    text-align: center;
  }

  .guardian-result__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    padding: 0.75rem 0 0;
  }

  .guardian-result__actions .ritual-button {
    min-width: 0;
    min-height: 56px;
    padding-inline: 0.55rem;
    font-size: 0.82rem;
  }
}