/* District Quest Log: local, calm discovery navigation. */
.dq {
  --dq-cyan: var(--color-primary-bright, #16d9ff);
  --dq-red: var(--color-secondary, #ff4b2b);
  --dq-bg: rgba(2, 10, 16, .97);
  --dq-line: rgba(137, 190, 211, .24);
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 180;
  color: #eaf8fd;
  font-family: var(--font-body, "Inter Tight", system-ui, sans-serif);
}

.dq button,
.dq a { font: inherit; }

.dq__launcher {
  display: grid;
  grid-template-columns: 34px auto;
  gap: 10px;
  align-items: center;
  min-width: 146px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(22, 217, 255, .5);
  border-radius: 2px;
  background: rgba(2, 12, 19, .94);
  color: #eaf8fd;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .38), inset 0 1px rgba(255,255,255,.04);
  cursor: pointer;
  text-align: left;
}

.dq__launcher:hover { border-color: var(--dq-cyan); }
.dq__launcher:focus-visible,
.dq__close:focus-visible,
.dq__reset:focus-visible,
.dq__quest a:focus-visible { outline: 2px solid var(--dq-cyan); outline-offset: 3px; }

.dq__launcher-mark {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--dq-red);
  color: var(--dq-red);
  font: 800 .72rem/1 var(--font-code, monospace);
  clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
}

.dq__launcher-copy { display: grid; gap: 2px; }
.dq__launcher-copy strong { font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.dq__launcher-copy small { color: #8fa8b4; font: 600 .62rem/1 var(--font-code, monospace); }

.dq__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(400px, calc(100vw - 24px));
  max-height: min(680px, calc(100vh - 96px));
  overflow: auto;
  border: 1px solid rgba(22, 217, 255, .34);
  border-radius: 2px;
  background:
    linear-gradient(rgba(22,217,255,.025) 1px, transparent 1px),
    linear-gradient(90deg,rgba(22,217,255,.025) 1px, transparent 1px),
    var(--dq-bg);
  background-size: 28px 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  scrollbar-width: thin;
}

.dq__panel[hidden] { display: none; }
.dq__panel::before { content: ""; display: block; height: 2px; background: linear-gradient(90deg,var(--dq-cyan),transparent 68%); }

.dq__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--dq-line);
}
.dq__eyebrow { color: var(--dq-cyan); font: 700 .58rem/1 var(--font-code,monospace); letter-spacing: .16em; }
.dq__head h2 { margin: 5px 0 0; font-size: 1.25rem; letter-spacing: -.02em; }
.dq__close { width: 32px; height: 32px; border: 1px solid var(--dq-line); border-radius: 1px; background: transparent; color: #9db2bc; cursor: pointer; font-size: 1.2rem; }
.dq__close:hover { color: #fff; border-color: var(--dq-cyan); }

.dq__intro { margin: 0; padding: 13px 18px 10px; color: #9db2bc; font-size: .78rem; line-height: 1.45; }
.dq__progress-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 0 18px 14px; color: var(--dq-cyan); font: 700 .62rem/1 var(--font-code,monospace); text-transform: uppercase; }
.dq__progress-row progress { width: 100%; height: 4px; border: 0; border-radius: 0; background: rgba(137,190,211,.16); appearance: none; }
.dq__progress-row progress::-webkit-progress-bar { background: rgba(137,190,211,.16); }
.dq__progress-row progress::-webkit-progress-value { background: var(--dq-cyan); box-shadow: 0 0 12px rgba(22,217,255,.45); }
.dq__progress-row progress::-moz-progress-bar { background: var(--dq-cyan); }

.dq__list { display: grid; gap: 1px; margin: 0; padding: 1px 0; list-style: none; background: var(--dq-line); border-block: 1px solid var(--dq-line); }
.dq__quest { background: rgba(3, 15, 23, .98); }
.dq__quest a { display: grid; grid-template-columns: 28px 1fr 22px; gap: 10px; align-items: start; min-height: 104px; padding: 13px 16px; color: inherit; text-decoration: none; }
.dq__quest a:hover { background: rgba(22,217,255,.055); }
.dq__quest.is-current a { box-shadow: inset 2px 0 var(--dq-red); }
.dq__quest.is-done { background: rgba(3, 19, 27, .98); }
.dq__index { color: #627984; font: 700 .62rem/1 var(--font-code,monospace); padding-top: 3px; }
.dq__body { display: grid; gap: 4px; min-width: 0; }
.dq__code { color: var(--dq-cyan); font: 700 .55rem/1 var(--font-code,monospace); letter-spacing: .13em; }
.dq__body strong { font-size: .82rem; }
.dq__body small { color: #8fa8b4; font-size: .7rem; line-height: 1.4; }
.dq__body em { color: #708a96; font: 600 .58rem/1.25 var(--font-code,monospace); font-style: normal; text-transform: uppercase; }
.dq__state { display: grid; width: 22px; aspect-ratio: 1; place-items: center; border: 1px solid var(--dq-line); color: #708a96; font: 700 .68rem/1 var(--font-code,monospace); }
.dq__quest.is-done .dq__state { color: var(--dq-cyan); border-color: rgba(22,217,255,.55); background: rgba(22,217,255,.08); }

.dq__foot { display: grid; gap: 10px; padding: 13px 18px 16px; }
.dq__foot > span { color: #6e8792; font: .55rem/1.4 var(--font-code,monospace); text-transform: uppercase; letter-spacing: .07em; }
.dq__reset { justify-self: start; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #8fa8b4; cursor: pointer; font-size: .66rem; }
.dq__reset:hover { color: #eaf8fd; border-bottom-color: currentColor; }

.dq-feature-action {
  width: 100%;
  min-height: 36px;
  margin-top: auto;
  padding: 8px 10px;
  border: 1px solid rgba(22,217,255,.3);
  border-radius: 1px;
  background: rgba(22,217,255,.035);
  color: #9db8c4;
  font: 700 .6rem/1 var(--font-code,monospace);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.dq-feature-action:hover,.dq-feature-action:focus-visible { border-color: var(--dq-cyan); color: #eaf8fd; outline: none; }
.dq-feature-action.is-explored { border-color: rgba(22,217,255,.5); background: rgba(22,217,255,.08); color: var(--dq-cyan); }
main[data-district="features"] .district-buehne__inhalt .br .bp { display:flex; flex-direction:column; }

@media (prefers-reduced-motion: no-preference) {
  .dq__panel { transform-origin: bottom right; animation: dq-enter .22s cubic-bezier(.2,.8,.2,1) both; }
  .dq__launcher, .dq__quest a, .dq__close { transition: border-color .18s ease, color .18s ease, background-color .18s ease; }
  @keyframes dq-enter { from { opacity: 0; transform: translateY(8px) scale(.985); } }
}

@media (max-width: 560px) {
  .dq { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); }
  .dq__launcher { min-width: 44px; grid-template-columns: 34px; padding: 5px; }
  .dq__launcher-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .dq__panel { right: -2px; max-height: calc(100vh - 78px); }
}

@media (prefers-reduced-motion: reduce) {
  .dq *, .dq *::before, .dq *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}