/* ══════════════════════════════════════════════════════════
   Main Quests — Visual Novel Dialogue & Quest Cards
   Enhanced aesthetics for immersive cultivation experience
   ══════════════════════════════════════════════════════════ */

/* ── Animations ── */
.mq-fade-in{animation:mqFadeIn .35s ease forwards}
.mq-fade-out{animation:mqFadeOut .35s ease forwards !important}
.mq-slide-up{animation:mqSlideUp .4s cubic-bezier(.16,1,.3,1) forwards}
@keyframes mqFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mqFadeOut{from{opacity:1}to{opacity:0;pointer-events:none}}
@keyframes mqSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes mqBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes mqPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,215,0,0.3)}50%{box-shadow:0 0 12px 4px rgba(255,215,0,0.15)}}
@keyframes mqPortraitBreath{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.03);filter:brightness(1.1)}}
@keyframes mqNarratorFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes mqCardAppear{from{opacity:0;transform:translateY(12px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mqChapterShine{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes mqComplete{0%{transform:scale(1)}30%{transform:scale(1.02)}50%{box-shadow:0 0 30px rgba(46,204,113,0.3)}100%{transform:scale(1)}}

/* ── Overlay ── */
.mq-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:10050;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px)}

/* ── Dialogue Modal (Visual Novel Style) ── */
.mq-dialogue-modal{background:linear-gradient(160deg,#0a0f20 0%,#111c35 50%,#0d1628 100%);border:2px solid rgba(255,215,0,0.25);border-radius:20px;padding:0;max-width:620px;width:94%;box-shadow:0 0 80px rgba(255,215,0,0.08),0 24px 80px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,215,0,0.06);overflow:hidden;cursor:default}
.mq-dialogue-top-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:rgba(0,0,0,0.35);border-bottom:1px solid rgba(255,215,0,0.12)}
.mq-dialogue-chapter{color:rgba(255,215,0,0.7);font-size:.72em;text-transform:uppercase;letter-spacing:2.5px;font-weight:700;background:linear-gradient(90deg,rgba(255,215,0,0.7),rgba(255,180,0,0.9),rgba(255,215,0,0.7));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mq-dialogue-progress{display:flex;gap:5px;align-items:center}
.mq-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.1);transition:all .3s}
.mq-dot-filled{background:rgba(255,215,0,0.7)}

.mq-dialogue-body{display:flex;gap:20px;padding:28px 28px 20px;min-height:120px;align-items:flex-start}
.mq-narrator-body{justify-content:center}
.mq-portrait-col{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;width:80px}
.mq-npc-icon{width:68px;height:68px;border-radius:14px;object-fit:cover;border:2px solid rgba(255,255,255,0.15);box-shadow:0 4px 20px rgba(0,0,0,0.5),0 0 15px rgba(255,215,0,0.06);background:rgba(255,255,255,0.03);animation:mqPortraitBreath 4s ease-in-out infinite;transition:border-color .3s,box-shadow .3s}
.mq-npc-icon:hover{border-color:rgba(255,215,0,0.4);box-shadow:0 4px 25px rgba(255,215,0,0.15)}
.mq-npc-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));color:#555;font-size:1.5em;animation:none}
.mq-narrator-icon{width:48px;height:48px;border-radius:50%;opacity:.5;animation:mqNarratorFloat 3s ease-in-out infinite}
.mq-speaker-label{font-size:.72em;font-weight:700;text-align:center;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,0.5)}
.mq-text-col{flex:1;display:flex;align-items:center}
.mq-dialogue-text{color:#d8d8e8;font-size:1.08em;line-height:1.75;min-height:60px;font-family:Georgia,'Times New Roman',serif;text-shadow:0 1px 2px rgba(0,0,0,0.3)}

.mq-dialogue-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:rgba(0,0,0,0.3);border-top:1px solid rgba(255,255,255,0.05)}
.mq-dialogue-hint{color:#556;font-size:.72em;animation:mqBlink 2s ease-in-out infinite;letter-spacing:.3px}
.mq-dialogue-btn{background:linear-gradient(135deg,#ffd700,#e6a800);color:#111;border:none;padding:10px 30px;font-size:.92em;font-weight:800;border-radius:10px;cursor:pointer;transition:all .25s;letter-spacing:.3px;box-shadow:0 2px 10px rgba(255,215,0,0.2)}
.mq-dialogue-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,215,0,0.4);background:linear-gradient(135deg,#ffe44d,#ffd700)}
.mq-dialogue-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(255,215,0,0.2)}

/* ── Tab Separation ── */
.quests-divider{height:2px;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.2),transparent);margin:20px 0 10px}
.mq-tab-header h2{color:#ffd700 !important}

/* ── Narrator-specific styling ── */
.mq-narrator-body .mq-dialogue-text{font-style:italic;color:#a8b8cc;letter-spacing:.2px}
.mq-narrator-body{background:rgba(0,0,0,0.12);border-radius:8px;margin:0 8px;padding:24px 20px}

/* ── Speaker-specific portrait glows ── */
.mq-portrait-col[data-speaker="zhang"] .mq-npc-icon{border-color:rgba(255,215,0,0.3);box-shadow:0 4px 20px rgba(255,215,0,0.15)}
.mq-portrait-col[data-speaker="liu"] .mq-npc-icon{border-color:rgba(231,76,60,0.3);box-shadow:0 4px 20px rgba(231,76,60,0.15)}
.mq-portrait-col[data-speaker="mei"] .mq-npc-icon{border-color:rgba(155,89,182,0.3);box-shadow:0 4px 20px rgba(155,89,182,0.15)}
.mq-portrait-col[data-speaker="chen"] .mq-npc-icon{border-color:rgba(46,204,113,0.3);box-shadow:0 4px 20px rgba(46,204,113,0.15)}

/* ── Quest Card ── */
.mq-card{background:linear-gradient(145deg,#111828,#162035);border:2px solid rgba(255,215,0,0.2);border-radius:14px;padding:20px 24px;margin-bottom:8px;position:relative;overflow:hidden;animation:mqCardAppear .5s ease forwards}
.mq-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.4),transparent)}
.mq-card-active{border-color:rgba(255,215,0,0.35);animation:mqPulse 3s ease-in-out infinite,mqCardAppear .5s ease forwards;transition:box-shadow .3s}
.mq-card-active:hover{box-shadow:0 8px 30px rgba(255,215,0,0.1)}
.mq-card-locked{border-color:rgba(255,255,255,0.06);opacity:.6}
.mq-card-locked::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)}
.mq-card-complete{border-color:rgba(46,204,113,0.4);background:linear-gradient(145deg,#0f1f15,#142a1e);animation:mqComplete 1s ease forwards}
.mq-card-complete::before{background:linear-gradient(90deg,transparent,rgba(46,204,113,0.4),transparent)}
.mq-card-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.mq-card-badge{background:linear-gradient(135deg,#ffd700,#e6a800);color:#111;font-size:.65em;font-weight:900;padding:4px 12px;border-radius:6px;letter-spacing:1px;flex-shrink:0;box-shadow:0 2px 8px rgba(255,215,0,0.2);text-shadow:0 1px 0 rgba(255,255,255,0.2)}
.mq-badge-locked{background:linear-gradient(135deg,#555,#444);color:#aaa;box-shadow:none;text-shadow:none}
.mq-badge-ch1{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff;box-shadow:0 2px 10px rgba(79,172,254,0.3)}
.mq-badge-ch2{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;box-shadow:0 2px 10px rgba(168,85,247,0.3)}
.mq-badge-ch3{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 2px 10px rgba(239,68,68,0.3)}
.mq-badge-ch4{background:linear-gradient(135deg,#ffd700,#f59e0b);color:#111;box-shadow:0 2px 10px rgba(255,215,0,0.4);background-size:200% auto;animation:mqChapterShine 3s linear infinite}
.mq-card-header-text{flex:1}
.mq-card-title{color:#ffd700;font-size:1.05em;margin:0;font-weight:700}
.mq-card-subtitle{color:#aaa;font-size:.83em}
.mq-quest-num{color:#555;font-size:.75em;font-weight:600;flex-shrink:0}
.mq-card-content{margin-bottom:10px}
.mq-objective{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;margin-bottom:10px;font-size:.92em}
.mq-obj-active{background:rgba(52,152,219,0.08);border:1px solid rgba(52,152,219,0.18);color:#88bbdd}
.mq-obj-done{background:rgba(46,204,113,0.08);border:1px solid rgba(46,204,113,0.2);color:#2ecc71}
.mq-obj-check{font-size:1.1em;width:20px;text-align:center;flex-shrink:0}
.mq-obj-info{flex:1;display:flex;flex-direction:column;gap:6px}
.mq-obj-bar{height:4px !important;margin:0 !important}
.mq-card-reward{color:#aaa;font-size:.82em;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mq-inline-icon{width:16px;height:16px;vertical-align:middle}
.mq-card-locked-text{color:#666;font-size:.9em;margin-bottom:10px}
.mq-card-lore{color:#aab;font-size:.88em;line-height:1.6;margin-bottom:10px;font-style:italic}
.mq-card-stats{color:#555;font-size:.78em;text-align:right}
.mq-card-actions{display:flex;gap:8px;flex-wrap:wrap}
.mq-progress-bar{height:6px;background:rgba(255,255,255,0.06);border-radius:3px;margin-bottom:10px;overflow:hidden}
.mq-progress-fill{height:100%;background:linear-gradient(90deg,#3498db,#2ecc71);border-radius:3px;transition:width .5s ease;box-shadow:0 0 6px rgba(46,204,113,0.2)}
.mq-lore-btn{background:rgba(255,215,0,0.06);border:1px solid rgba(255,215,0,0.2);color:#ffd700;padding:7px 18px;border-radius:8px;font-size:.8em;cursor:pointer;transition:all .2s}
.mq-lore-btn:hover{background:rgba(255,215,0,0.12);border-color:rgba(255,215,0,0.5)}

/* ── Claim & Intro Buttons ── */
.mq-claim-btn{background:linear-gradient(135deg,rgba(46,204,113,0.15),rgba(46,204,113,0.08));border:1px solid rgba(46,204,113,0.4);color:#2ecc71;padding:9px 22px;border-radius:8px;font-size:.85em;font-weight:700;cursor:pointer;transition:all .25s;animation:mq-claim-glow 2s ease-in-out infinite}
.mq-claim-btn:hover{background:linear-gradient(135deg,rgba(46,204,113,0.3),rgba(46,204,113,0.15));border-color:#2ecc71;transform:translateY(-1px);box-shadow:0 4px 16px rgba(46,204,113,0.2)}
@keyframes mq-claim-glow{0%,100%{box-shadow:0 0 4px rgba(46,204,113,0.1)}50%{box-shadow:0 0 12px rgba(46,204,113,0.25)}}
.mq-intro-btn{background:linear-gradient(135deg,rgba(52,152,219,0.15),rgba(52,152,219,0.08));border:1px solid rgba(52,152,219,0.4);color:#3498db;animation:mq-intro-pulse 2s ease-in-out infinite}
.mq-intro-btn:hover{background:linear-gradient(135deg,rgba(52,152,219,0.3),rgba(52,152,219,0.15));border-color:#3498db}
@keyframes mq-intro-pulse{0%,100%{box-shadow:0 0 4px rgba(52,152,219,0.1)}50%{box-shadow:0 0 12px rgba(52,152,219,0.3)}}

/* ── Quest History ── */
.mq-history-section{margin-top:16px;border:1px solid rgba(255,255,255,0.06);border-radius:12px;overflow:hidden;background:rgba(0,0,0,0.15)}
.mq-history-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:rgba(255,255,255,0.03);cursor:pointer;color:#aab;font-size:.85em;font-weight:600;transition:background .2s;user-select:none}
.mq-history-header:hover{background:rgba(255,255,255,0.06)}
.mq-history-chevron{font-size:.7em;color:#666;transition:transform .2s}
.mq-history-list{padding:6px 12px 12px}
.mq-history-chapter{color:#ffd700;font-size:.78em;font-weight:700;padding:10px 0 4px;border-bottom:1px solid rgba(255,215,0,0.08);margin-bottom:4px}
.mq-history-item{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;transition:background .15s}
.mq-history-item:hover{background:rgba(255,255,255,0.04)}
.mq-history-check{font-size:.75em}
.mq-history-title{flex:1;color:#8899aa;font-size:.8em}
.mq-history-reread{background:none;border:1px solid rgba(255,215,0,0.15);color:#ffd700;padding:3px 8px;border-radius:5px;font-size:.7em;cursor:pointer;opacity:.5;transition:all .2s}
.mq-history-reread:hover{opacity:1;border-color:rgba(255,215,0,0.4);background:rgba(255,215,0,0.06)}

/* ── Sidebar Badge ── */
.nav-item[data-tab="quests"]{position:relative}
.mq-nav-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:10px;font-weight:800;line-height:1;padding:0 5px;pointer-events:none;z-index:50;box-shadow:0 2px 6px rgba(0,0,0,0.5)}
.mq-nav-badge-new{background:#3498db;color:#fff;animation:mq-badge-pulse 1.5s ease-in-out infinite}
.mq-nav-badge-claim{background:#2ecc71;color:#fff;animation:mq-badge-pulse 1.5s ease-in-out infinite}
.mq-nav-badge-progress{background:rgba(100,120,160,0.85);color:#d0d8e8;font-size:9px;font-weight:700;letter-spacing:.3px;padding:0 4px;min-width:auto}
@keyframes mq-badge-pulse{0%,100%{transform:scale(1);box-shadow:0 2px 6px rgba(0,0,0,0.5)}50%{transform:scale(1.2);box-shadow:0 2px 12px rgba(46,204,113,0.6)}}

.mq-card-npc{width:46px;height:46px;border-radius:10px;float:right;margin:-4px -4px 8px 12px}

/* ── Quest Status Hint ── */
.mq-status-hint{font-size:.8em;padding:6px 12px;border-radius:6px;margin-bottom:8px;font-weight:600;letter-spacing:.2px}
.mq-status-new{color:#5dade2;background:rgba(52,152,219,0.08);border-left:3px solid rgba(52,152,219,0.4)}
.mq-status-claim{color:#2ecc71;background:rgba(46,204,113,0.08);border-left:3px solid rgba(46,204,113,0.5)}
.mq-status-progress{color:#8899bb;background:rgba(100,120,160,0.08);border-left:3px solid rgba(100,120,160,0.35)}

/* ── Reward Toast ── */
.mq-reward-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#1a2510,#152a12);border:2px solid #2ecc71;color:#2ecc71;padding:14px 30px;border-radius:14px;font-size:.95em;z-index:10060;box-shadow:0 8px 30px rgba(46,204,113,0.25),0 0 40px rgba(46,204,113,0.08);white-space:nowrap;backdrop-filter:blur(8px)}

/* ── Mobile ── */
@media(max-width:600px){
    .mq-dialogue-modal{border-radius:14px}
    .mq-dialogue-body{padding:20px 18px;gap:14px}
    .mq-npc-icon{width:52px;height:52px;border-radius:10px}
    .mq-portrait-col{width:60px}
    .mq-card{padding:16px 18px}
    .sq-card{padding:14px 14px}
}

/* ══════════════════════════════════════════════════════════
   Side Quests & Dao Path Quests — Card Grid
   ══════════════════════════════════════════════════════════ */

.sq-tab-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.sq-tab-header h2{color:#C084FC !important}
.sq-count{color:#8899aa;font-size:.78em;font-weight:600}

#side-quest-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-top:8px}

.sq-empty{color:#556;font-size:.88em;padding:20px;text-align:center;font-style:italic}

/* ── Side Quest Card ── */
.sq-card{background:linear-gradient(145deg,#111828,#162035);border:1px solid rgba(192,132,252,0.15);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .2s;animation:mqCardAppear .4s ease forwards}
.sq-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(192,132,252,0.3),transparent)}
.sq-card:hover{border-color:rgba(192,132,252,0.35);box-shadow:0 4px 20px rgba(192,132,252,0.08);transform:translateY(-2px)}
.sq-card-claimable{border-color:rgba(46,204,113,0.35);animation:mqPulse 3s ease-in-out infinite,mqCardAppear .4s ease forwards}
.sq-card-claimable::before{background:linear-gradient(90deg,transparent,rgba(46,204,113,0.4),transparent)}

/* Dao Path card variant */
.sq-card-dao{background:linear-gradient(145deg,#14102a,#1a1540);border-color:rgba(192,132,252,0.25)}
.sq-card-dao::before{background:linear-gradient(90deg,transparent,rgba(192,132,252,0.5),transparent)}
.sq-card-dao:hover{box-shadow:0 4px 24px rgba(192,132,252,0.12)}

.sq-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sq-card-title{color:#C084FC;font-size:.95em;font-weight:700}
.sq-tag{font-size:.65em;padding:3px 8px;border-radius:5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0}
.sq-tag-dao{background:rgba(192,132,252,0.1);color:#C084FC;border:1px solid rgba(192,132,252,0.3)}
.sq-tag-territory{background:rgba(52,152,219,0.1);color:#5dade2;border:1px solid rgba(52,152,219,0.2)}

.sq-card-desc{color:#8899aa;font-size:.78em;line-height:1.5;margin-bottom:10px;font-style:italic}

.sq-objective{margin-bottom:8px}
.sq-objective span{color:#aab;font-size:.82em;display:block;margin-bottom:4px}
.sq-progress-bar{height:4px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden}
.sq-progress-fill{height:100%;background:linear-gradient(90deg,#C084FC,#9b59b6);border-radius:2px;transition:width .5s}
.sq-card-claimable .sq-progress-fill{background:linear-gradient(90deg,#2ecc71,#27ae60)}

.sq-status{font-size:.75em;padding:5px 10px;border-radius:5px;margin-bottom:8px;font-weight:600}
.sq-status-new{color:#5dade2;background:rgba(52,152,219,0.08);border-left:3px solid rgba(52,152,219,0.4)}
.sq-status-claim{color:#2ecc71;background:rgba(46,204,113,0.08);border-left:3px solid rgba(46,204,113,0.5)}
.sq-status-progress{color:#8899bb;background:rgba(100,120,160,0.08);border-left:3px solid rgba(100,120,160,0.35)}

.sq-reward{color:#aaa;font-size:.76em;display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.sq-inline-icon{width:14px;height:14px;vertical-align:middle}

.sq-card-actions{display:flex;gap:6px;flex-wrap:wrap}
.sq-btn{padding:6px 14px;border-radius:6px;font-size:.78em;font-weight:700;cursor:pointer;transition:all .2s;border:1px solid}
.sq-btn-intro{background:rgba(52,152,219,0.1);border-color:rgba(52,152,219,0.3);color:#3498db}
.sq-btn-intro:hover{background:rgba(52,152,219,0.2);border-color:#3498db}
.sq-btn-reread{background:rgba(192,132,252,0.06);border-color:rgba(192,132,252,0.2);color:#C084FC}
.sq-btn-reread:hover{background:rgba(192,132,252,0.12);border-color:rgba(192,132,252,0.5)}
.sq-btn-claim{background:rgba(46,204,113,0.12);border-color:rgba(46,204,113,0.4);color:#2ecc71;animation:mq-claim-glow 2s ease-in-out infinite}
.sq-btn-claim:hover{background:rgba(46,204,113,0.25);border-color:#2ecc71;transform:translateY(-1px)}

/* ── Side Quest History ── */
.sq-history{margin-top:16px;grid-column:1/-1;border:1px solid rgba(255,255,255,0.06);border-radius:10px;overflow:hidden;background:rgba(0,0,0,0.12)}
.sq-history-toggle{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;color:#aab;font-size:.82em;font-weight:600;user-select:none;transition:background .2s}
.sq-history-toggle:hover{background:rgba(255,255,255,0.05)}
.sq-chevron{font-size:.65em;color:#666}
.sq-history-list{padding:6px 12px 10px}
.sq-history-item{display:flex;align-items:center;gap:8px;padding:5px 4px;color:#8899aa;font-size:.78em;border-radius:5px}
.sq-history-item:hover{background:rgba(255,255,255,0.03)}
.sq-history-check{font-size:.7em}