/* QUESTS tab (static/js/quests.js): header, grouped quests, squad, season track, LOOT BAY. Hub tokens only. */
#tab-quests .bn-pane { display: grid; gap: 14px; } #tab-quests .bn-pane.hidden { display: none; }

/* ---- the header: today's ring, the numbers, the role ---- */
.q-hero { display: grid; grid-template-columns: auto 1fr minmax(200px, 260px); gap: 22px; align-items: center; padding: 16px 20px; margin-bottom: 12px; }
.q-ring { position: relative; width: 118px; height: 118px; }
.q-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.q-ring-bg { fill: none; stroke: rgba(79, 227, 255, .14); stroke-width: 8; }
.q-ring-fg { fill: none; stroke: var(--amber); stroke-width: 8; stroke-linecap: butt; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset .6s ease; filter: drop-shadow(0 0 6px var(--glow)); }
.q-ring-n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--mono); line-height: 1.1; }
.q-ring-n b { font-size: 30px; font-weight: 800; color: #eaf4fa; } .q-ring-n span { font-size: 12px; color: #8fa6b6; }
.q-ring-n em { margin-top: 3px; font: normal 700 7px var(--mono); letter-spacing: .2em; color: var(--holo); }
.q-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.q-stats > div { padding: 9px 12px; background: rgba(79, 227, 255, .05); border-left: 2px solid var(--holo); font-family: var(--mono); }
.q-stats em { display: block; font: normal 700 9px var(--mono); letter-spacing: .2em; color: #6f899b; }
.q-stats b { display: block; font-size: 24px; font-weight: 800; color: #eaf4fa; line-height: 1.15; }
.q-stats span { font-size: 10px; color: #6f899b; letter-spacing: .06em; }
.q-stat-crates { border-left-color: var(--amber) !important; background: rgba(255, 176, 32, .07) !important; } .q-stat-crates b { color: var(--amber) !important; }
.q-stats button { padding: 0 !important; background: none !important; border: 0 !important; font: 700 9px var(--mono) !important; letter-spacing: .14em; color: var(--amber) !important; cursor: pointer; }
.q-role { display: grid; gap: 5px; font-family: var(--mono); }
.q-role em { font: normal 700 9px var(--mono); letter-spacing: .2em; color: #6f899b; }
.q-role b { font-size: 18px; letter-spacing: .12em; color: var(--amber); text-shadow: 0 0 14px var(--glow); }
.q-role span { font-size: 10px; color: #8fa6b6; }

/* ---- quests, grouped by where you do them ---- */
.q-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.q-group { background: rgba(79, 227, 255, .03); border: 1px solid rgba(79, 227, 255, .14); }
.q-group.clear { border-color: rgba(127, 224, 160, .4); }
.q-gh { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 12px 11px; font-family: var(--mono); }
.q-gh i { font-style: normal; color: var(--holo); } .q-gh b { flex: 1; font-size: 11px; letter-spacing: .24em; color: var(--amber); } .q-gh span { font-size: 11px; color: #a9c0cf; }
.q-gh u { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(79, 227, 255, .12); }
.q-gh u::after { content: ""; display: block; width: var(--p); height: 100%; background: var(--amber); transition: width .5s ease; }
.q-group.clear .q-gh u::after { background: #7fe0a0; }
.q-quest { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid rgba(79, 227, 255, .08); font-size: 13px; }
.q-quest > i { display: grid; place-content: center; width: 16px; height: 16px; border: 1px solid rgba(79, 227, 255, .4); font: normal 700 11px var(--mono); color: #04060b; }
.q-quest > b { font: 700 11px var(--mono); color: var(--amber); }
.q-quest em { font: normal 700 9px var(--mono); letter-spacing: .18em; color: #7fe0a0; } .q-quest em.open { color: #5d7485; }
.q-quest button { padding: 5px 10px !important; min-width: 0; font: 700 9px var(--mono) !important; letter-spacing: .16em; border-radius: 0 !important; color: var(--holo) !important;
  background: rgba(79, 227, 255, .06) !important; border: 1px solid rgba(79, 227, 255, .35) !important; }
.q-quest button:hover { color: #04060b !important; background: var(--holo) !important; }
.q-quest.done { opacity: .62; } .q-quest.done > span { color: #8fa6b6; } .q-quest.done > i { background: #7fe0a0; border-color: #7fe0a0; } .q-quest.done > b { color: #5d7485; }

/* ---- the squad today ---- */
.q-squad { display: grid; gap: 2px; }
.q-sq { display: grid; grid-template-columns: minmax(120px, 1.2fr) 110px 80px 70px 2fr; gap: 12px; align-items: center; padding: 8px 10px; font: 12px var(--mono); border-left: 2px solid rgba(79, 227, 255, .2); background: rgba(79, 227, 255, .03); }
.q-sq.in { border-left-color: var(--amber); }
.q-sq b { color: #eaf4fa; } .q-sq-role { font-size: 10px; letter-spacing: .14em; color: var(--holo); } .q-sq-st { color: #a9c0cf; } .q-sq-pts { color: var(--amber); }
.q-sq-tags { display: flex; flex-wrap: wrap; gap: 4px; } .q-sq-tags i { padding: 2px 6px; font: normal 9px var(--mono); letter-spacing: .1em; color: #a9c0cf; border: 1px solid rgba(143, 166, 182, .3); }

/* ---- season ---- */
.q-track { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 4px 0 8px; }
.q-track i { display: grid; place-content: center; height: 30px; font: normal 14px var(--mono); color: #4a6070; background: rgba(79, 227, 255, .06); border: 1px solid rgba(79, 227, 255, .16); }
.q-track i.drop { color: #8fa6b6; border-color: rgba(255, 176, 32, .4); }
.q-track i.on { background: var(--amber); border-color: var(--amber); color: #04060b; box-shadow: 0 0 12px var(--glow); }
.q-goals { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.q-goal { position: relative; display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px 13px; font: 12px var(--mono); background: rgba(79, 227, 255, .04); }
.q-goal b { color: var(--amber); white-space: nowrap; } .q-goal.done { color: #7fe0a0; } .q-goal.done b { color: #7fe0a0; }
.q-goal u { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(79, 227, 255, .12); }
.q-goal u::after { content: ""; display: block; width: var(--p); height: 100%; background: var(--amber); } .q-goal.done u::after { background: #7fe0a0; }

/* ---- the loot bay ---- */
.q-rack { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; min-height: 96px; }
.q-crates { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.q-crates i { position: relative; width: 54px; height: 46px; background: linear-gradient(180deg, #3a2a10, #1c1408); border: 1px solid var(--amber); box-shadow: inset 0 0 0 3px rgba(4, 6, 11, .55), 0 0 14px rgba(255, 176, 32, .25); }
.q-crates i::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--amber); opacity: .8; }
.q-crates i::after { content: ""; position: absolute; left: 50%; top: 8px; width: 12px; height: 12px; margin-left: -6px; background: #04060b; border: 1px solid var(--amber); }
.q-crates b { font: 700 14px var(--mono); color: var(--amber); }
.q-rack-act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.q-rack-n { font-family: var(--mono); text-align: right; } .q-rack-n b { display: block; font-size: 30px; color: var(--amber); line-height: 1; } .q-rack-n span { font-size: 9px; letter-spacing: .2em; color: #6f899b; }
.q-rack-act button { padding: 12px 18px !important; font: 700 11px var(--mono) !important; letter-spacing: .2em; border-radius: 0 !important; }
.q-open-all { color: #04060b !important; background: var(--amber) !important; border: 1px solid var(--amber) !important; box-shadow: 0 0 18px rgba(255, 176, 32, .35); }
.q-rack-empty { display: grid; gap: 4px; font-family: var(--mono); } .q-rack-empty b { font-size: 12px; letter-spacing: .22em; color: #8fa6b6; } .q-rack-empty span { font-size: 12px; color: #5d7485; }
.q-all { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(79, 227, 255, .16); } .q-all.hidden { display: none; }
.q-drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.q-drop { display: grid; gap: 3px; justify-items: center; padding: 12px 6px 9px; text-align: center; font-family: var(--mono); background: rgba(6, 14, 26, .8); border: 1px solid var(--r, #4a6070);
  border-top-width: 3px; opacity: 0; transform: translateY(8px) scale(.94); transition: opacity .22s ease, transform .22s ease; }
.q-drop.on { opacity: 1; transform: none; box-shadow: 0 0 16px color-mix(in srgb, var(--r) 35%, transparent); }
.q-drop i { font-style: normal; font-size: 28px; line-height: 1.1; } .q-drop b { font-size: 11px; letter-spacing: .1em; color: #eaf4fa; } .q-drop span { font-size: 8px; letter-spacing: .16em; color: var(--r); }
.r-blue { --r: #5aa8ff; } .r-purple { --r: #b48cff; } .r-pink { --r: #ff7ad9; } .r-red { --r: #ff5a4a; } .r-gold { --r: #ffe08a; }
.q-tally { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; font: 700 11px var(--mono); letter-spacing: .12em; } .q-tally.hidden { display: none; }
.q-tally span { color: var(--r, #a9c0cf); } .q-tally button { margin-left: auto; padding: 9px 16px !important; font: 700 10px var(--mono) !important; letter-spacing: .2em; border-radius: 0 !important; }
.q-drop-row { display: grid; grid-template-columns: 26px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 8px; font: 12px var(--mono); border-left: 2px solid var(--r, #4a6070); background: rgba(79, 227, 255, .03); margin-bottom: 2px; }
.q-drop-row i { font-style: normal; font-size: 16px; text-align: center; } .q-drop-row b { color: #eaf4fa; font-weight: 600; } .q-drop-row span { font-size: 10px; letter-spacing: .12em; color: var(--r); text-transform: uppercase; } .q-drop-row em { font-style: normal; font-size: 10px; color: #5d7485; }
.q-stix { display: flex; flex-wrap: wrap; gap: 6px; } .q-stix i { font-style: normal; font-size: 20px; padding: 4px 7px; background: rgba(79, 227, 255, .05); border: 1px solid rgba(79, 227, 255, .14); }
@media (prefers-reduced-motion: reduce) { .q-drop { transition: none; } .q-ring-fg { transition: none; } }
@media (max-width: 900px) {
  .q-hero { grid-template-columns: auto 1fr; } .q-role { grid-column: 1 / -1; }
  .q-sq { grid-template-columns: 1fr auto auto; } .q-sq-role, .q-sq-tags { display: none; }
  .q-track i { height: 24px; font-size: 11px; } .q-rack { justify-content: flex-start; }
}
@media (max-width: 520px) { .q-hero { grid-template-columns: 1fr; justify-items: center; } .q-stats { width: 100%; } }