@layer legacy {
#quest-panel {
  position:fixed; z-index:110; top:max(16px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,env(safe-area-inset-bottom)); width:min(620px,calc(100vw - 32px)); box-sizing:border-box;
  display:flex; flex-direction:column; overflow:hidden; color:#e9f0ec; background:#102b36fa;
  border:1px solid #b7a06a; border-radius:16px; box-shadow:0 18px 70px #0009; font:14px/1.5 system-ui,sans-serif;
}
#quest-panel[hidden] {display:none}
#quest-panel * {box-sizing:border-box}
#quest-panel button {font:inherit; min-height:44px; cursor:pointer; border:1px solid #637b7b; border-radius:8px; color:#edf4ee; background:#203e49; padding:8px 12px; touch-action:manipulation}
#quest-panel button:disabled {cursor:default; opacity:.65}
#quest-panel button:focus-visible,#quest-open:focus-visible {outline:3px solid #f1d492; outline-offset:3px}
.quest-header {display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px 0}
#quest-panel h2 {font:600 25px/1.2 Georgia,serif; margin:3px 0 8px}
#quest-panel h3 {font:600 24px/1.2 Georgia,serif; margin:0 0 16px}
#quest-panel h4 {font-size:15px; margin:5px 0 8px}
#quest-panel h5 {font-size:14px; margin:5px 0}
#quest-panel p {margin:7px 0}
#quest-panel .quest-eyebrow {font-size:10px; letter-spacing:1.6px; font-weight:700; color:#d6bd82; margin:0 0 6px}
#quest-panel .quest-intro {padding:0 22px; color:#c0cfcd; margin:3px 0 14px}
#quest-panel .quest-close {font-size:27px; line-height:1; min-width:44px; padding:4px; align-self:flex-start}
.quest-tabs {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:0 22px 16px; border-bottom:1px solid #45606a}
#quest-panel .quest-tabs button {font-size:12px; padding:7px 3px}
#quest-panel .quest-tabs button[aria-pressed=true] {color:#162f38; background:#e8c887; border-color:#f0d9a4; font-weight:700}
.quest-content {min-height:0; overflow:auto; overscroll-behavior:contain; padding:20px 22px 28px; scrollbar-color:#637b7b #102b36}
.quest-summary,.quest-count,.quest-card-top {display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.quest-reset {font-size:11px; color:#b9c8c5}
.quest-progress {width:100%; height:9px; border:0; border-radius:9px; overflow:hidden; background:#061e28; accent-color:#e6c47e; margin:9px 0 5px}
.quest-progress::-webkit-progress-bar {background:#061e28; border-radius:9px}
.quest-progress::-webkit-progress-value {background:#e6c47e; border-radius:9px}
.quest-progress::-moz-progress-bar {background:#e6c47e; border-radius:9px}
.quest-description {color:#b9cccd; font-size:13px}
.quest-milestones {margin:20px 0}
.quest-chests {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px}
.quest-chest {padding:10px 8px; border:1px solid #49646d; border-radius:10px; background:#14323d; display:flex; flex-direction:column}
.quest-chest p {font-size:11px; color:#c3d2d0; flex:1}
.quest-chest-icon {width:30px;height:30px;margin:2px auto;color:#ebcf90}
.journey-state-icon {width:18px;height:18px;margin-right:7px;vertical-align:-4px}
#quest-panel .quest-chest button {font-size:11px; padding:6px 2px; margin-top:10px; width:100%}
.quest-list {display:grid; gap:10px}
.quest-card {border:1px solid #46636c; background:#193944; border-radius:10px; padding:15px}
.quest-card.complete,.quest-chest.complete {border-color:#c6a764}
.quest-card.claimed,.quest-chest.claimed {border-color:#467966; background:#163b3d}
.quest-card.locked {background:#142e38}
.quest-category {font-size:10px; text-transform:uppercase; letter-spacing:1px; color:#9fbabf}
.quest-state {font-size:11px; color:#d6bd82}
.quest-count {font-size:12px; color:#d1dddb; margin-top:13px}
.quest-points,.quest-reward {color:#e6cc95; font-size:12px}
#quest-panel .quest-claim:not(:disabled) {background:#e8c887; border-color:#edcf95; color:#152c35; font-weight:700}
.quest-card .quest-claim {margin-top:10px}
.quest-card small {display:block; color:#aec1c3; margin-top:8px}
.quest-chapter {margin-top:12px!important; color:#e8cf9b}
.quest-calendar {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0}
.quest-day {border:1px solid #49646d; border-radius:10px; padding:14px; background:#193944; display:flex; flex-direction:column; gap:7px}
.quest-day .quest-reward {flex:1}
.quest-day.available {border:2px solid #e2bd76}
.quest-day.claimed {border-color:#548c75}
.quest-day.grand {grid-column:1/-1; background:linear-gradient(120deg,#22434c,#3b3b34); border-color:#c6a764}
.quest-day.grand h4 {font:600 21px Georgia,serif}
.quest-footer {display:flex; align-items:center; gap:10px; justify-content:space-between; border-top:1px solid #45606a; padding:10px 22px; background:#102b36}
#quest-panel .quest-status {font-size:12px; color:#e5cf9f; margin:0; flex:1}
#quest-panel .quest-refresh {font-size:12px; flex-shrink:0}
.quest-empty {color:#c0cfcd; padding:24px 0}
@media(max-width:600px),(max-height:500px) {
  #quest-panel {top:0; right:0; bottom:0; width:100%; border-radius:0; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom)}
  .quest-header {padding:14px 16px 0}
  #quest-panel .quest-intro {padding:0 16px; font-size:12px; margin-bottom:10px}
  .quest-tabs {padding:0 16px 10px}
  .quest-content {padding:16px}
  .quest-footer {padding:8px 16px}
  .quest-chests {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:380px) {.quest-calendar {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-height:500px) {
  .quest-header {padding-top:8px}
  #quest-panel h2 {font-size:20px}
  #quest-panel .quest-intro {display:none}
  .quest-tabs {grid-template-columns:repeat(6,minmax(0,1fr)); padding-top:7px}
  #quest-panel .quest-tabs button {font-size:11px}
}

.quest-stores {border-top:1px solid #45606a; padding-top:14px; color:#d5c49d; font-size:12px}

.quest-challenges {border:1px solid #b79d68; border-radius:10px; padding:14px; margin:15px 0; background:#243d40}
.quest-challenges ul {padding-left:19px; margin:12px 0; font-size:13px; color:#d6e0db}
.quest-challenges li {margin:6px 0}
/* Earned supplies, cosmetic pennants, journey unlocks and live encounter reports. */
.quest-tabs {grid-template-columns:repeat(4,minmax(0,1fr))}
.quest-balance {padding:12px; border:1px solid #64796a; border-radius:8px; color:#e8ce94; background:#1c3d42; font-size:13px}
.quest-cost {color:#f2dcb0; font-size:13px}
.quest-missing {color:#f2b6a5; font-size:12px}
.quest-gate-note {padding:10px 12px; margin:8px!important; border:1px solid #bd985e; border-radius:8px; color:#f3d8a4; background:#203b40; font:12px/1.5 system-ui}
.quest-gate-note[hidden] {display:none}
.quest-unlocks,.quest-encounters {margin:14px 0 20px}
.quest-unlocks ul {list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px}
.quest-unlocks li {padding:9px; border:1px solid #49646d; border-radius:7px; font-size:12px; color:#c5d1d1}
.quest-unlocks li.unlocked {color:#a9d4b8; border-color:#548c75}
.quest-encounters .quest-card {margin:10px 0}
.quest-location {color:#d3c5a0; font-size:13px; text-transform:capitalize}
.captain-pennant {display:flex; align-items:center; gap:5px; margin:5px 0; max-width:100%; padding:1px 7px 1px 2px; border:1px solid #d0ae6b; border-radius:5px; background:#293b3de8; color:#efd5a1; font:11px system-ui; cursor:pointer; pointer-events:auto}
.captain-pennant[hidden] {display:none}
.captain-pennant svg {width:28px; height:24px; flex-shrink:0}
.pennant-cloth {fill:#a52a43; stroke:#efca79; stroke-width:1.5}
.pennant-mark {fill:#f5d185}
.pennant-pole {fill:none; stroke:#f1dca2; stroke-width:2.5; stroke-linecap:round}
.quest-pennant-preview {float:right; margin:0 0 12px 14px}
.quest-pennant-preview svg {width:92px; height:72px}
#quest-panel .quest-recipe .quest-claim {width:100%}
@media(max-width:600px) {#quest-panel .quest-tabs button {font-size:11px; padding:7px 2px}.quest-unlocks ul {grid-template-columns:1fr}}
@media(max-height:500px) {.quest-tabs {grid-template-columns:repeat(8,minmax(0,1fr))}#quest-panel .quest-tabs button {font-size:10px}}
.captain-pennant:focus-visible {outline:3px solid #f1d492; outline-offset:3px}
@media(pointer:coarse) {.captain-pennant {min-height:44px}}

}