/* Quests page */
.quests-page { padding-bottom: 18px; }
.q-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 16px; }
.q-head h2 { margin: 6px 0; font-family: var(--title); font-size: 26px; letter-spacing: 1px; color: #e7ddd1; }
.q-head p { max-width: 680px; line-height: 1.5; }
.q-summary { display: flex; align-items: center; gap: 10px; }
.q-summary-stat { display: grid; justify-items: center; min-width: 100px; padding: 8px 14px; border: 1px solid #4d3a38; border-radius: 10px; background: linear-gradient(160deg, #251f1f, #141111); }
.q-summary-stat b { color: #e4d8ca; font-family: var(--title); font-size: 22px; }
.q-summary-stat b small { color: #8e7776; font-size: 13px; }
.q-summary-stat span { color: #a8998c; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.quests-page .q-claim-all { min-height: 44px; padding: 0 20px; font-size: 14px; }
.q-claim-all b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; border-radius: 11px; background: #f1ebe433; }
.q-summary-note { max-width: 140px; }

.q-chapter { margin-bottom: 18px; }
.q-chapter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #332828; }
.q-chapter-head h3 { margin: 0 0 2px; font-family: var(--title); font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; color: #d9c9b2; }
.q-chapter-head p { margin: 0; }
.q-chapter-count { color: #a8998c; font-size: 12px; font-variant-numeric: tabular-nums; }
.q-chapter-count b { color: #e05a5a; }
.q-chapter-count.complete { color: #b6e08f; }
.q-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 8px; }

.q-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid #3e3130;
  border-radius: 11px;
  background: linear-gradient(160deg, #1f1919, #121010);
}
.q-card.is-ready { border-color: #b3262e; background: linear-gradient(160deg, #3a1a1c, #130f0f); box-shadow: 0 0 0 1px #b3262e44, 0 4px 16px #0007; }
.q-card.is-claimed { opacity: .62; }
.q-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid #4d3a38;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #281e1e, #100d0d);
  color: #cdbfae;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.q-card.is-ready .q-mark { border-color: #e5dacd; background: radial-gradient(circle at 35% 30%, #5c3131, #201818); color: #efe8df; font-size: 20px; box-shadow: 0 0 12px #e5dacd55; }
.q-card.is-claimed .q-mark { border-color: #4f6a3c; color: #b6e08f; font-size: 18px; }
.q-body { display: grid; gap: 5px; min-width: 0; }
.q-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.q-title h4 { margin: 0; overflow: hidden; color: #ebe2d7; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.q-count { flex: 0 0 auto; color: #a8998c; font-size: 12px; font-variant-numeric: tabular-nums; }
.q-body p { margin: 0; color: #baab9a; font-size: 12.5px; }
.q-bar { height: 5px; overflow: hidden; border-radius: 3px; background: #2e2424; }
.q-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a161c, #e5dacd); }
.q-card.is-ready .q-bar i { background: linear-gradient(90deg, #6f9d55, #b6e08f); }
.q-rewards { display: flex; flex-wrap: wrap; gap: 5px; }
.q-reward { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; background: #2a2222; color: #d6c9b8; font-size: 11px; white-space: nowrap; }
.q-reward i { font-style: normal; font-size: 10px; }
.q-reward.gold i { color: #c62e38; }
.q-reward.shard i { color: #b7a0ff; }
.q-reward.upgrade { background: #281e1e; color: #cfe7b5; }
.q-reward.upgrade i { color: #9fd06a; }
.q-reward.seal { background: #2a1f2e; color: #e6d0f2; }
.q-reward.seal i { color: #cfa6f0; }
.q-reward.mastery i { color: #dfd1c1; }
.q-action button { min-height: 34px; padding: 0 16px; white-space: nowrap; }
.q-done { color: #b6e08f; font-size: 12px; font-weight: 700; white-space: nowrap; }

@media (max-width: 760px) {
  .q-head { flex-direction: column; align-items: stretch; }
  .q-summary { justify-content: space-between; }
  .q-list { grid-template-columns: 1fr; }
  .q-card { grid-template-columns: 40px minmax(0, 1fr); }
  .q-mark { width: 40px; height: 40px; }
  .q-action { grid-column: 2; }
}