:root {
    --green-dark: #2d6e2d;
    --green-mid: #4a9e4a;
    --green-light: #9dc49d;
    --cream: #f5f0e8;
    --cream-dark: #ede5d5;
    --white: #ffffff;
    --text: #2a2a2a;
    --text-light: #5a5a5a;
    --font-heading: 'Nunito', sans-serif;
    --font-body: Georgia, serif;
    
    /* Nature Theme */
    --leaf-green: #4ade80;
    --earth-brown: #78350f;
    --forest-bg: #f0fdf4;
    --bark-text: #451a03;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background: var(--cream);
    color: var(--text);
    line-height: 1.7;
}

header {
    background: var(--green-dark);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--white);
    text-decoration: none;
}

header nav a {
    color: var(--green-light);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 600;
    margin-left: 1.5rem;
}

header nav a:hover { color: var(--white); }

main { max-width: 800px; margin: 0 auto; padding: 2rem; }

.hero {
    text-align: center;
    padding: 3rem 1rem;
}

.hero h1 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--green-dark);
    margin-bottom: 0.5rem;
}

.adventure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.adventure-card {
    background: var(--white);
    border-left: 5px solid var(--green-dark);
    border-radius: 0 12px 12px 0;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.adventure-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(45, 110, 45, 0.15);
}

.card-icon { font-size: 2.5rem; }

.adventure-card h2 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: var(--green-dark);
    font-weight: 700;
    text-transform: capitalize;
}

.adventure-card p { font-size: 0.9rem; color: var(--text-light); }

.breadcrumb {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.breadcrumb a { color: var(--green-mid); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.adventure-header h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--green-dark);
    text-transform: capitalize;
    margin-bottom: 1.5rem;
}

.episode-list { list-style: none; }

.episode-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--white);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    text-decoration: none;
    color: var(--text);
    border-left: 4px solid var(--green-light);
    transition: border-color 0.15s, transform 0.1s;
}

.episode-link:hover {
    border-left-color: var(--green-dark);
    transform: translateX(4px);
}

.episode-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--green-mid);
    min-width: 2rem;
}

.episode-title {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--green-dark);
}

.story-content {
    background: var(--white);
    border-left: 5px solid var(--green-mid);
    border-radius: 0 16px 16px 0;
    padding: 2.5rem;
    margin-top: 1rem;
    font-size: 1.1rem;
    line-height: 1.8;
}

.story-content h1, .story-content h2, .story-content h3 {
    font-family: var(--font-heading);
    color: var(--green-dark);
    margin: 1.5em 0 0.5em;
}

.story-content p { margin-bottom: 1em; }

footer {
    text-align: center;
    padding: 2rem;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    color: var(--text-light);
    border-top: 1px solid var(--cream-dark);
    margin-top: 3rem;
}

/* Character Names Highlighting */
.story-content strong, .story-content b {
    color: var(--earth-brown);
    font-weight: 800;
    border-bottom: 2px solid var(--leaf-green);
    padding: 0 2px;
}

/* Character Actions Highlighting */
.story-content em, .story-content i {
    color: var(--text-light);
    font-style: italic;
    font-size: 0.95rem;
    opacity: 0.85;
}

/* Nature Theme Overrides for story-content */
.story-content {
    background: var(--forest-bg);
    color: var(--bark-text);
}