/* mujun.quest - Colors: #141018, #D0A030, #C03030, #408040, #4A3828 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #141018; color: #4A3828; font-family: 'Crimson Text', serif; font-size: 1rem; line-height: 1.75; }

/* Hero */
#hero { min-height: 40vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 2rem; }
.loading-text { font-family: 'VT323', monospace; font-size: 1rem; color: #4080C0; letter-spacing: 0.04em; margin-bottom: 1.5rem; opacity: 0; animation: typeIn 1.2s steps(28) forwards; overflow: hidden; white-space: nowrap; width: 0; }
@keyframes typeIn { to { width: 28ch; opacity: 1; } }
.quest-title { font-family: 'Press Start 2P', cursive; font-size: clamp(0.9rem, 2.5vw, 1.5rem); color: #D0A030; text-transform: uppercase; letter-spacing: 0.02em; opacity: 0; animation: fadeIn 0.6s ease forwards 1.5s; }
@keyframes fadeIn { to { opacity: 1; } }

/* Timeline */
#timeline { position: relative; max-width: 700px; margin: 0 auto; padding: 2rem 2rem 4rem 90px; }
.timeline-line { position: absolute; top: 0; bottom: 0; left: 60px; width: 2px; background: #D0A030; transform-origin: top; animation: drawLine 1.5s ease forwards 1.8s; transform: scaleY(0); }
@keyframes drawLine { to { transform: scaleY(1); } }

/* Quest Entry */
.quest-entry { position: relative; margin-bottom: 2.5rem; opacity: 0; transform: translateY(15px); transition: opacity 0.6s ease, transform 0.6s ease; }
.quest-entry.visible { opacity: 1; transform: translateY(0); }

/* Timeline Node */
.timeline-node { position: absolute; left: -42px; top: 1.5rem; width: 12px; height: 12px; border-radius: 50%; background: #D0A030; border: 2px solid #141018; z-index: 2; }
.timeline-node::before { content: ''; position: absolute; top: 3px; left: 12px; width: 20px; height: 2px; background: #D0A030; transform: scaleX(0); transform-origin: left; }
.quest-entry.visible .timeline-node::before { animation: drawBranch 0.3s ease forwards 0.2s; }
@keyframes drawBranch { to { transform: scaleX(1); } }
.quest-entry.visible .timeline-node { animation: nodePulse 0.4s ease; }
@keyframes nodePulse { 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

.xp-text { position: absolute; top: -20px; left: -8px; font-family: 'VT323', monospace; font-size: 0.85rem; color: #D0A030; white-space: nowrap; opacity: 0; }
.quest-entry.visible .xp-text { animation: xpPop 0.6s ease forwards 0.3s; }
@keyframes xpPop { 0% { opacity: 0; transform: translateY(5px); } 50% { opacity: 1; transform: translateY(-5px); } 100% { opacity: 0; transform: translateY(-15px); } }

/* Quest Card */
.quest-card { position: relative; background: #F0E8D0; border: 4px solid; border-image: repeating-linear-gradient(90deg, #4A3828 0 4px, transparent 4px 8px) 4; padding: 1.5rem 1.75rem; }
.quest-level { font-family: 'VT323', monospace; font-size: 0.9rem; color: #4080C0; letter-spacing: 0.04em; display: block; margin-bottom: 0.5rem; }
.quest-name { font-family: 'Press Start 2P', cursive; font-size: clamp(0.75rem, 1.5vw, 1rem); color: #4A3828; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 1rem; line-height: 1.6; }
.quest-desc { margin-bottom: 1rem; color: #4A3828; }
.resolution { font-size: 0.9rem; color: #4A3828; opacity: 0.8; border-top: 1px solid rgba(74,56,40,0.2); padding-top: 0.75rem; }

/* Illuminated Capital */
.illuminated { float: left; font-family: 'Crimson Text', serif; font-size: 3rem; line-height: 1; color: #D0A030; margin-right: 0.15rem; margin-top: 0.1rem; }

/* Status Badge */
.status-badge { position: absolute; top: 0.75rem; right: 0.75rem; font-family: 'VT323', monospace; font-size: 0.8rem; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: 2px; }
.status-badge.resolved { background: rgba(64,128,64,0.15); color: #408040; }
.status-badge.unresolved { background: rgba(192,48,48,0.15); color: #C03030; }
.status-badge.paradox { background: rgba(208,160,48,0.15); color: #D0A030; }

/* Boss Entry */
.boss-entry { margin-left: -30px; margin-right: -10px; }
.boss-card { border-width: 4px; animation: bossGlow 2s ease infinite; }
@keyframes bossGlow { 0%, 100% { border-image: repeating-linear-gradient(90deg, #D0A030 0 4px, transparent 4px 8px) 4; } 50% { border-image: repeating-linear-gradient(90deg, #C03030 0 4px, transparent 4px 8px) 4; } }
.boss-node { background: #C03030; width: 16px; height: 16px; left: -44px; }
.boss-entry .quest-name { color: #C03030; font-size: clamp(0.85rem, 1.8vw, 1.2rem); }

/* Responsive */
@media (max-width: 600px) {
    #timeline { padding-left: 50px; }
    .timeline-line { left: 20px; }
    .timeline-node { left: -42px; }
    .boss-entry { margin-left: -10px; margin-right: 0; }
}