/* ============================================================ QUEST UI styles (.quest-*) — nạp sau v3.css trong . Dùng biến màu v3.css: --gold-*, --good, --bad, --muted, --cream, --tan. ============================================================ */ /* ----- Tabs ----- */ .quest-tabs { display:flex; gap:5px; margin-bottom:12px; } .quest-tab { flex:1; padding:8px 4px; font-size:10px; font-weight:700; letter-spacing:.5px; font-family:inherit; cursor:pointer; color:var(--tan); background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(20,10,0,.35)); border:1px solid rgba(200,134,11,.35); border-radius:8px; transition:.15s; } .quest-tab.active { color:#1a0d00; background:linear-gradient(180deg,var(--gold-200),var(--gold-500)); border-color:var(--gold-300); } /* ----- Thanh Hoạt động ----- */ .quest-activity { background:linear-gradient(180deg,rgba(40,22,4,.5),rgba(20,10,0,.45)); border:1px solid rgba(200,134,11,.4); border-radius:10px; padding:10px 12px; margin-bottom:12px; } .quest-act-head { font-size:11px; color:var(--gold-200); font-weight:700; margin-bottom:7px; letter-spacing:.5px; } .quest-act-head b { color:var(--cream); } .quest-act-track { height:8px; background:rgba(0,0,0,.5); border-radius:4px; overflow:hidden; } .quest-act-fill { height:100%; background:linear-gradient(90deg,var(--good),#9cffb0); border-radius:4px; transition:width .3s; } .quest-ms-row { display:flex; gap:6px; margin-top:8px; } .quest-ms { flex:1; padding:5px 2px; font-size:10px; font-weight:700; font-family:inherit; border-radius:7px; cursor:default; color:var(--muted); background:rgba(0,0,0,.3); border:1px solid rgba(200,134,11,.3); } .quest-ms.ready { color:#1a0d00; background:linear-gradient(180deg,var(--good),#2aa54a); border-color:var(--good); cursor:pointer; animation:quest-ms-pulse 1.2s ease-in-out infinite; } .quest-ms.done { color:var(--good); border-color:var(--good); } @keyframes quest-ms-pulse { 0%,100%{box-shadow:0 0 0 rgba(76,255,110,0);} 50%{box-shadow:0 0 10px rgba(76,255,110,.6);} } /* ----- Danh sách nhiệm vụ ----- */ .quest-list { display:flex; flex-direction:column; gap:8px; } .quest-empty { text-align:center; color:var(--muted); padding:24px; font-size:12px; } .quest-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(20,10,0,.38)); border:1px solid rgba(200,134,11,.35); } .quest-row.ready { border-color:var(--good); background:linear-gradient(180deg,rgba(76,255,110,.08),rgba(20,80,40,.05)); } .quest-row.locked { opacity:.5; } .quest-ico { font-size:24px; width:34px; text-align:center; flex-shrink:0; } .quest-mid { flex:1; min-width:0; } .quest-title { font-size:13px; font-weight:700; color:var(--cream); } .quest-sub { font-size:10px; color:var(--gold-200); font-weight:600; } .quest-desc { font-size:10px; color:var(--muted); margin:1px 0 5px; } .quest-bar { height:6px; background:rgba(0,0,0,.5); border-radius:3px; overflow:hidden; } .quest-bar-fill { height:100%; background:linear-gradient(90deg,var(--gold-500),var(--gold-200)); border-radius:3px; transition:width .3s; } .quest-reward { font-size:10px; color:var(--gold-200); margin-top:4px; font-weight:600; } .quest-actcol { flex-shrink:0; min-width:54px; text-align:center; } .quest-progtxt { font-size:11px; color:var(--tan); font-weight:700; } .quest-done { font-size:10px; color:var(--good); font-weight:700; } .quest-lock { font-size:16px; }