.treasure-chest-debug-panel {
  --debug-accent: #ffd56a;
}

.treasure-chest-debug-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.treasure-chest-debug-panel > header > div {
  display: grid;
  gap: 1px;
}

.treasure-chest-debug-panel > header span {
  color: rgba(255, 232, 172, .68);
  font-size: 9px;
  font-weight: 800;
}

.treasure-chest-debug-panel > header button {
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 8px;
  font-size: 20px;
}

.treasure-chest-scroll {
  padding: 9px 11px 11px;
}

.treasure-chest-state {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 213, 106, .24);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(111, 72, 25, .35), rgba(25, 30, 29, .58));
}

.treasure-chest-state-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 207, 87, .16);
  color: #ffdc78;
  font-size: 14px;
}

.treasure-chest-state > div {
  display: grid;
  gap: 2px;
}

.treasure-chest-state strong {
  font-size: 11px;
}

.treasure-chest-state output {
  font-size: 9px;
  font-weight: 900;
}

.treasure-chest-state output[data-state="broken"] { color: #ff9d79 !important; }
.treasure-chest-state output[data-state="hit"] { color: #ffbd63 !important; }

.treasure-chest-hack-test {
  display: grid;
  gap: 7px;
  margin: 8px 0 4px;
  padding: 10px;
  border: 1px solid rgba(111, 214, 202, .22);
  border-radius: 10px;
  background: rgba(8, 24, 27, .58);
}

.treasure-chest-hack-test > div {
  display: grid;
  gap: 3px;
}

.treasure-chest-hack-test strong { font-size: 11px; }
.treasure-chest-hack-test small { color: rgba(222, 241, 241, .62); font-size: 9px; line-height: 1.3; }
.treasure-chest-hack-test > button { min-height: 31px; border-radius: 8px; font-size: 10px; font-weight: 900; }
.treasure-chest-hack-test > button[data-active="true"] { border-color: rgba(255, 144, 111, .6); color: #ffb39c; }
.treasure-chest-hack-test > button[data-chest-hack-test-copy] { background: rgba(133, 222, 207, .09); }
.treasure-chest-hack-test > button:disabled { opacity: .38; cursor: default; }
.treasure-chest-hack-test > output { color: #c8f5ec; font-size: 9px; font-weight: 850; line-height: 1.35; }
.treasure-chest-hack-test ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.treasure-chest-hack-test li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1px 7px;
  padding: 5px 6px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .045);
}

.treasure-chest-hack-test li > strong { grid-row: 1 / span 2; align-self: center; color: #ffb196; }
.treasure-chest-hack-test li > span { font-size: 8px; font-weight: 850; }
.treasure-chest-hack-test li > small { font-size: 8px; }
.treasure-chest-hack-test li[data-passed="true"] > strong { color: #8ce6bb; }

.treasure-chest-controls {
  display: grid;
  align-content: start;
}

.treasure-chest-control {
  display: grid;
  gap: 5px;
  padding: 9px 1px;
  border-bottom: 1px solid rgba(255, 231, 175, .09);
}

.treasure-chest-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.treasure-chest-control strong { font-size: 11px; }
.treasure-chest-control output { font-size: 10px; font-weight: 900; }
.treasure-chest-control small { color: rgba(232, 241, 246, .59); font-size: 9px; line-height: 1.25; }
.treasure-chest-control input[type="range"] { width: 100%; }

.treasure-chest-debug-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.treasure-chest-debug-panel > footer > div { display: flex; gap: 6px; }
.treasure-chest-debug-panel > footer small { color: rgba(226, 241, 247, .66); font-size: 9px; font-weight: 800; }
.treasure-chest-debug-panel > footer small[data-tone="error"] { color: #ff9d8c; }
.treasure-chest-debug-panel > footer button { min-height: 30px; padding: 0 9px; border-radius: 8px; font-size: 9px; font-weight: 900; }
.treasure-chest-debug-panel > footer button[data-chest-save] { background: #b87a22 !important; color: #fff9e9 !important; }