/* ═══════════════════════════════════════════════════════════════
   LEVEL UP QUESTS (daily.php)
   Builds on css/character.css (cd-* tokens, panels, tabs), css/events.css (quest cards, tables, opponents) and
   css/story.css (st-crumb, st-link, st-nav-a, st-target); everything here is dl-* scoped.
   Static by design: no loaders or entrance animations.
   ═══════════════════════════════════════════════════════════════ */

.dl .st-crumb { color: var(--acc2); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.cd-jp.cd-body .dl .st-crumb { letter-spacing: 0; }

/* ── The three kinds: the game's quest-list buttons as tabs ─────── */
.dl-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(6px, 2.4vw, 22px); max-width: 600px; margin: 0 auto 18px; }
.dl-kind { display: grid; gap: 6px; justify-items: center; min-width: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: inherit; cursor: pointer; }
.dl-kind-img { display: block; width: 100%; height: auto; filter: saturate(0.5) brightness(0.6); }
.dl-kind:hover .dl-kind-img { filter: saturate(0.85) brightness(0.85); }
.dl-kind.is-active .dl-kind-img { filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.dl-kind:focus-visible { outline: 2px solid var(--acc2); outline-offset: 4px; }
.dl-kind-cap { display: grid; text-align: center; line-height: 1.25; min-width: 0; }
.dl-kind-cap b { color: var(--text-2); font-size: clamp(0.72rem, 2.6vw, 0.92rem); font-weight: 700; overflow-wrap: anywhere; }
.dl-kind.is-active .dl-kind-cap b { color: var(--acc2); }
.dl-kind-cap small { color: var(--text-3); font-size: clamp(0.64rem, 2.2vw, 0.76rem); }

/* ── One kind ───────────────────────────────────────────────────── */
.dl-pane { scroll-margin-top: 12px; }
.dl-pane-head { display: grid; grid-template-columns: clamp(96px, 26vw, 190px) minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; gap: 8px clamp(10px, 3vw, 22px); margin-bottom: 14px; }
.dl-art { display: block; grid-row: 1 / span 2; width: 100%; height: auto; }
.dl-pane-txt { align-self: end; }
.dl-pane-txt { min-width: 0; }
.dl-pane-txt .cd-h2 { margin-bottom: 6px; }
.dl-desc { margin: 0 0 6px; color: var(--text-2); }
.dl-pane-txt .ev-sub b { color: var(--gold); font-variant-numeric: tabular-nums; }
.dl-boost .dl-pane-txt .ev-sub b, .dl-boost .dl-val, .dl-boost .ev-q-meta [data-dl-v] { color: var(--up); }

/* Campaign multiplier switch (shown by js/daily.js) */
.dl-mult { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; grid-column: 2; justify-self: start; align-self: start; padding: 4px 4px 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); }
@media (max-width: 520px) {   /* phones: under the art, on one line */
    .dl-art { grid-row: 1; }
    .dl-pane-txt { align-self: center; }
    .dl-mult { grid-column: 1 / -1; }
}
.dl-mult > span { margin-right: 4px; color: var(--text-3); font-size: 0.76rem; font-weight: 700; }
.dl-mult .cd-tab { padding-left: 12px; padding-right: 12px; font-variant-numeric: tabular-nums; }

/* Level table */
.dl-table { min-width: 600px; }
.dl-table th[scope="row"] { white-space: nowrap; }
.dl .dl-table th[scope="row"] a { color: var(--acc2); font-weight: 700; text-decoration: none; }
.dl .dl-table th[scope="row"] a:hover { text-decoration: underline; }
.dl-table th, .dl-table td { vertical-align: middle; }
.dl-table thead th:nth-child(-n+2) { white-space: nowrap; }
.cd-jp .dl-table thead th { word-break: keep-all; }   /* Japanese heads wrap only at the U+200B in the page copy */
.dl-table thead th.ev-num { text-align: right; }
.dl-table .ev-tiles { gap: 6px; flex-wrap: nowrap; }
.dl-table .it-tile .it-ic { width: 42px; }
.dl-val { color: #fff; font-weight: 700; white-space: nowrap; }
@media (max-width: 520px) {   /* phones: level, BP and both amounts fit without scrolling; the tiles scroll */
    .dl-table { min-width: 0; }
    .dl-table th, .dl-table td { padding: 6px 5px; }
    .dl-table thead th { line-height: 1.2; vertical-align: bottom; }
}

/* Level cards */
.dl-quests { margin-top: 16px; }
.dl-count { margin-left: 4px; color: var(--gold); font-variant-numeric: tabular-nums; }
@media (min-width: 992px) {
    .dl-quests { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ── How it works ───────────────────────────────────────────────── */
.dl-facts .ev-q-row:first-child { padding-top: 0; border-top: 0; }
.dl-first { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

/* ── Drop campaigns ─────────────────────────────────────────────── */
.dl-camp-lead { max-width: 80ch; margin: 0 0 12px; color: var(--text-2); }
.dl-standing { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.dl-standing li { padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.9rem; }
.dl-standing b { margin-right: 6px; color: var(--acc2); }
/* every timed campaign, newest first: a scrolling list (multiplier, period + length, official notice) */
.dl-camp { max-height: 440px; margin: 0; padding: 0; overflow-y: auto; border-radius: 10px; background: rgba(0, 0, 0, 0.2); list-style: none; }
.dl-camp:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; }
.dl-camp li { display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: center; gap: 2px 12px; padding: 7px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.86rem; }
.dl-camp li:last-child { border-bottom: 0; }
.dl-when { font-variant-numeric: tabular-nums; }
.dl-when small { margin-left: 6px; color: var(--text-3); font-size: 0.76rem; white-space: nowrap; }
.dl-what { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.dl-what:empty { display: none; }
@media (min-width: 860px) {
    .dl-camp li { grid-template-columns: 3.2em 22em minmax(0, 1fr); }
    .cd-jp .dl-camp li { grid-template-columns: 3.2em 25em minmax(0, 1fr); }
    .dl-what { grid-column: 3; }
}
.dl-x { display: inline-block; min-width: 3em; padding: 0 8px; border-radius: 999px; background: rgba(255, 213, 83, 0.14); color: #ffe08a; text-align: center; font-variant-numeric: tabular-nums; }
.dl-m3 .dl-x { background: rgba(249, 115, 22, 0.22); color: #ffb27a; }
.dl-m10 .dl-x { background: var(--gold); color: var(--navy); }

/* ── Related ────────────────────────────────────────────────────── */
.dl-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }