.world-karma .karma-scale-section {
  container-type: inline-size;
  padding: 14px 18px 16px;
  border: 1px solid #bda16b45;
  border-radius: 12px;
  background: linear-gradient(135deg, #14232b 0%, #091720 68%, #101a22 100%);
  box-shadow: inset 0 1px 0 #ffffff0a;
}

.karma-scale { position: relative; height: 42px; margin: 2px 5px 0; }
.karma-scale-track {
  position: absolute;
  inset: 14px 0 auto;
  height: 15px;
  border: 1px solid #d7c38d77;
  border-radius: 999px;
  box-shadow: 0 0 0 4px #040b1099, inset 0 2px 4px #03101688;
}
.karma-scale-tick {
  position: absolute;
  top: 15px;
  width: 2px;
  height: 13px;
  transform: translateX(-50%);
  background: #fff0ca;
  box-shadow: 0 0 0 1px #14202a88;
  pointer-events: none;
  z-index: 1;
}
.karma-scale-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 8px;
  margin-top: 14px;
}
.karma-scale-marker {
  min-width: 0;
  padding: 10px 12px;
  color: #e8e0ce;
  border: 1px solid #bda16b50;
  border-radius: 6px;
  background: #0c1b25f0;
  text-align: left;
  cursor: pointer;
}
.karma-scale-marker-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.karma-scale-marker-label b { color: var(--marker-accent); font: 700 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; }
.karma-scale-marker-label span { min-width: 0; overflow-wrap: anywhere; }
.karma-scale-marker:hover,
.karma-scale-marker.is-selected { border-color: var(--marker-accent); background: #1a2b34; color: #fff4d9; }
.karma-scale-marker:focus-visible { outline: 2px solid #edcf8a; outline-offset: 3px; }
.karma-scale-current {
  position: absolute;
  top: 7px;
  width: 3px;
  height: 29px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: #fff7df;
  box-shadow: 0 0 0 1px #14212c, 0 0 9px #fff4c8;
  pointer-events: none;
  z-index: 3;
}
.karma-scale-current::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -7px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background: #fff7df;
  border: 1px solid #1a2832;
}
.karma-scale-ends { display: flex; justify-content: space-between; margin-top: -1px; color: #b9b3a4; font: 700 11px ui-monospace, SFMono-Regular, Consolas, monospace; }
.karma-scale-detail { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; padding: 10px 12px; border: 1px solid #bda16b3d; border-radius: 7px; background: #08151dbe; }
.karma-scale-detail-item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; font-size: 12px; line-height: 1.45; }
.karma-scale-detail-item span { color: #c2ccd0; }

:root.light .world-karma .karma-scale-section { background: linear-gradient(135deg, #fffdf7, #eef2f2); border-color: #b8aa87; }
:root.light .world-karma > div:first-child .font-serif { color: #263b47; }
:root.light .world-karma > p { color: #334b58; }
:root.light .karma-scale-marker { color: #253645; }
:root.light .karma-scale-marker { background: #fffdf6f2; border-color: #9e9d8c; box-shadow: 0 3px 8px #26405222; }
:root.light .karma-scale-marker-label b { filter: brightness(.6); }
:root.light .karma-scale-marker:hover,
:root.light .karma-scale-marker:focus-visible,
:root.light .karma-scale-marker.is-selected { background: #fff5da; color: #142536; }
:root.light .karma-scale-track { box-shadow: 0 0 0 4px #f5f2e8, inset 0 2px 4px #17263433; }
:root.light .karma-scale-current { background: #102839; box-shadow: 0 0 0 1px #fff, 0 0 6px #10283999; }
:root.light .karma-scale-current::before { background: #102839; border-color: #fff; }
:root.light .karma-scale-ends { color: #425466; }
:root.light .karma-scale-detail { background: #fffdf7; border-color: #b8aa87; }
:root.light .karma-scale-detail-item span { color: #344759; }
:root.light .karma-scale-detail-item strong { color: #263d4b; }

@media (max-width: 740px) {
  .world-karma .karma-scale-section { padding: 11px 10px 14px; }
}

.karma-stage-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.karma-stage-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid #bda16b3d;
  border-radius: 7px;
  background: #08151dbe;
  font-size: 13px;
  line-height: 1.45;
}

.karma-stage-item.is-selected { border-color: #d9b56d; background: #172936; }
.karma-stage-item span { color: #c2ccd0; }

:root.light .karma-stage-item { background: #fffdf7; border-color: #b8aa87; }
:root.light .karma-stage-item.is-selected { background: #fff5da; border-color: #92702c; }
:root.light .karma-stage-item strong { color: #263d4b; }
:root.light .karma-stage-item span { color: #344759; }