.dq-head { align-items: flex-end; }
.dq-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.dq-controls .chip img { width: 16px; height: 16px; border-radius: 3px; }
.dq-select select {
  min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r1);
  background: var(--surface-2); color: var(--text); font: 600 14px var(--font-body); cursor: pointer;
  transition: border-color .2s var(--ease);
}
.dq-select select:hover { border-color: var(--gold-hi); }

.dq-dungeon h2 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); padding: var(--s4) var(--s4) var(--s3);
  font-size: 20px; border-bottom: 1px solid var(--line);
}
.dq-dungeon h2 small { font: 500 13px var(--font-body); color: var(--muted); margin-left: auto; }
.dq-table thead th:first-child { width: 34%; }
.dq-table tbody th a { font-weight: 700; }
.dq-table tbody th a:active, .dq-reward:active { opacity: .7; }
.dq-side { display: inline-block; vertical-align: -3px; margin-right: var(--s1); border-radius: 3px; }
.dq-chain { display: block; color: var(--faint); font-size: 12px; font-weight: 500; margin-top: 2px; }
.dq-table td small { display: block; color: var(--muted); font-size: 12px; }
.dq-classic { display: inline !important; color: var(--faint) !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .06em; }
.dq-money i { font-style: normal; margin-left: 1px; }
.dq-g { color: #e8c35a; } .dq-s { color: #c7ccd6; } .dq-c { color: #d08b52; }
.dq-item-start { color: var(--gold-hi); font-size: 14px; }
.dq-rewards { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); }
.dq-reward { display: block; border-radius: var(--r1); transition: transform .2s var(--spring); }
.dq-reward:hover { transform: translateY(-2px); }
.dq-reward img { width: 30px; height: 30px; }
.dq-reward.q3 img { box-shadow: 0 0 0 1px #0070dd; }
.dq-reward.q4 img { box-shadow: 0 0 0 1px #a335ee; }
.dq-reward.q2 img { box-shadow: 0 0 0 1px #1eff00; }
.dq-then { color: var(--faint); margin: 0 2px; }
.dq-table tbody tr.is-locked { opacity: .45; }
.dq-empty { padding: var(--s5); }

@media (max-width: 640px) {
  .dq-controls { width: 100%; }
  .dq-dungeon h2 small { margin-left: 0; width: 100%; }
}
