:root {
    --bg: #0f1220;
    --panel: #171a2b;
    --muted: #8a8fb3;
    --text: #e9ecff;
    --accent: #6aa2ff;
    --accent-2: #9f78ff;
    --border: #242947;
    --success: #31d0aa;
  }
  #quest-menu {
    z-index: 15;
    position: absolute;
    width: 777px;
    max-height: 800px;
    overflow: scroll;
    border: solid 4px #000000;
    padding: 0px;
    border-radius: 16px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #0a0c14;
    font-family: 'Courier New', Courier, monospace;
    display: none;
    padding: 30px;
  }
  .wrap { max-width: 920px; width: 100%; }
  .status {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: #0a0c14; border: 1px solid var(--border); color: #b8bdf0;
    padding: 12px; border-radius: 12px; margin-bottom: 14px;
    white-space: pre-wrap;
  }
  .quest-card {
    background: var(--panel); border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .quest-header {
    padding: 18px 20px; border-bottom: 1px solid var(--border);
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  .quest-title { margin: 0; font-size: 18px; font-weight: 100; letter-spacing: .2px; }
  .quest-key {
    font-size: 12px; color: var(--muted); background: #0e1120; border: 1px solid var(--border);
    padding: 4px 8px; border-radius: 999px;  user-select: none;
  }
  .quest-title-btn {  transition: color .15s ease; color: white }
  .quest-title-btn:hover { color: var(--accent); }
  .quest-body { padding: 18px 20px; display: grid; grid-template-columns: 1fr; gap: 16px; }
  .desc { color: #cfd3ff; }
  .requirements, .steps { background: #121528; border: 1px solid var(--border); border-radius: 14px; }
  .requirements h4, .steps h4 {
    margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--border);
    font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted);
  }
  .requirements ul {
    list-style: none; padding: 12px 16px; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px;
  }
  .requirements li { color: #e5e8ff; }
  .steps ol { list-style: none; padding: 8px; margin: 0; display: grid; gap: 8px; }
  .step {
    border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #0f1224;
    transition: transform .07s ease, border-color .15s ease, box-shadow .2s ease;
     position: relative;
  }
  .step:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(106,162,255,.2); }
  .step.active { border-color: var(--success); box-shadow: 0 0 0 2px rgba(49,208,170,.25) inset; }
  .step-head { display: flex; gap: 10px; align-items: baseline; }
  .badge {
    font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted);
  }
  .step-title { font-weight: 700; margin: 0; color: white}
  .kv {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px 12px;
    margin-top: 8px; font-size: 13px; color: #d5d8ff;
  }
  .kv b { color: #f2f3ff; }
  .dialog { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 10px; }
  .line { display: flex; gap: 8px; }
  .expr { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-2); }
  .text { color: #e6e9ff; }
  .footer-note { color: var(--muted); font-size: 12px; margin-top: 10px; }
  code.inline {
    background: #0a0c14; border: 1px solid var(--border); padding: 2px 6px; border-radius: 6px;
  }
  /* existing CSS unchanged above... */
  
  .quest-selector {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
  }
  
  .quest-selector label {
    font-size: 14px;
  }
  
  .quest-selector select {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 14px;
  }

  .step.starter {
    border-color: var(--success);
    box-shadow: 0 0 0 2px rgba(49,208,170,.25) inset;
  }
  
  .step.deliver {
    border-color: orange;
    box-shadow: 0 0 0 2px rgba(255,165,0,.25) inset;
  }
  
  .vibrate {
    display: inline-block;
    animation: vibrate 0.1s infinite;
  }
  
  @keyframes vibrate {
    0%   { transform: translate(0px, 0px) rotate(0deg); }
    20%  { transform: translate(-1px, 1px) rotate(-1deg); }
    40%  { transform: translate(-1px, -1px) rotate(1deg); }
    60%  { transform: translate(1px, 1px) rotate(0deg); }
    80%  { transform: translate(1px, -1px) rotate(1deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
  }

  .dreamy {
    display: inline-block;
    animation: wave 2s infinite ease-in-out;
  }
  
  @keyframes wave {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-6px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(6px); }
    100% { transform: translateY(0); }
  }
  

  #uiQuestsPanel {
  margin: 10px;
}

.quest-wrapper {
    background: white;
    border: 3px solid #ae9891;
    margin: 8px 0;
    padding: 18px;
    
    border-radius: 7px;
    /* width: 100%; */
}

.quest-title {
    font-weight: 100;
    color: #2a2a2a;
    margin: 15px 0;
}

.quest-objective {
    color: #2eb05c;
    padding: 17px 0px;
    border-top: 2px solid #8080804a;
    border-bottom: 2px solid #8080804a
}

.quest-details {
  display: none;
  margin-top: 6px;
}

.quest-details div {
  margin-top: 19px;
  text-align: justify;
  color: #808080ab;
}

.quest-section h3 {
    color: #9e8574;
    font-weight: 100;
    margin-bottom: 4px;
}

.quest-wrapper.completed {
    background: none;
    opacity: 0.6;
  }

  /* Add this to your CSS */
.quest-requirements {
    border: 3px solid #00000029;
    background: #0000000a;
    padding: 5px;
    margin-top: 5px;
    border-radius: 7px;
  }
  .quest-requirements-title {
    font-weight: 100;
    margin-bottom: 10px;
    color: #2a2a2a;
  }
  .quest-requirement-unmet {
    color: rgb(255, 73, 73) !important;
  }

  .quest-reward-img {
    width: 50px;
    height: 50px;
    margin-top: 5px;
    margin-top: 10px;
    display: inline-block;
    cursor: none;
    position: relative;
    left: calc(100% - 50px);
  }