/* WebDevAI Version 5.6.1: Stable Styles */

:root {
    --parchment-bg: #f5f1e8;
    --sepia-text: #5d5248;
    --border-color: #dcd3c1;
    --primary-accent: #4a4e69; 
    --secondary-accent: #9a8c98;
    --enlightenment-color: #52b788;
    --paradox-color: #d00000;
}

body,html{margin:0;padding:0;font-family:'Georgia','Times New Roman',serif;background-color:var(--parchment-bg);color:var(--sepia-text);line-height:1.7}
.app-container{display:flex;justify-content:center}
#map-nav-container{width:280px;flex-shrink:0;background-color:#ede7da;border-right:1px solid var(--border-color);padding:20px;height:100vh;position:sticky;top:0;display:flex;flex-direction:column}
#map-header{text-align:center;border-bottom:1px solid var(--border-color);padding-bottom:10px}
#map-header h2{margin:0;font-family:'Georgia',serif}
#map-header p{margin:5px 0 0;font-style:italic;font-size:.9em;color:var(--secondary-accent)}
#map-container{flex-grow:1;display:flex;align-items:center;justify-content:center}#world-map-svg{width:100%;height:300px;background-color:#f5f1e8;border:1px solid var(--border-color)}.map-location{fill:var(--secondary-accent);stroke:var(--sepia-text);stroke-width:1px;cursor:pointer;transition:fill .2s}.map-location:hover{fill:var(--primary-accent)}.map-location.active{fill:var(--primary-accent);stroke-width:2px}.map-label{font-size:10px;fill:#fff;text-anchor:middle;pointer-events:none}#related-chapters-container{border-top:1px solid var(--border-color);padding-top:10px}#related-chapters-container h3{font-size:1em;margin:0 0 10px;text-align:center}#related-chapters-list{max-height:25vh;overflow-y:auto}#related-chapters-list a{display:block;padding:6px 8px;text-decoration:none;color:var(--sepia-text);font-size:.85em;border-left:3px solid transparent}#related-chapters-list a:hover{background-color:var(--parchment-bg);border-left-color:var(--secondary-accent)}#related-chapters-list a.active-chapter{border-left-color:var(--primary-accent);font-weight:700}
#content-container{flex-grow:1;max-width:800px;padding:20px;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}
#visualizer-container{background-color:var(--parchment-bg);border:1px solid var(--border-color);margin-bottom:30px;overflow:hidden}#visualizer-header{padding:10px 15px;background-color:#e6dfd1;border-bottom:1px solid var(--border-color)}#visualizer-header h3{margin:0;color:var(--sepia-text);font-family:'Georgia',serif;font-weight:400}#flatland-svg{position:relative;display:block;width:100%;height:300px;background-color:#fcfaf5;background-image:url(grid.svg);cursor:crosshair}.svg-shape{stroke-width:2;stroke:#2c2f45}.player{fill:var(--primary-accent);fill-opacity:.8}.npc{fill:var(--secondary-accent);fill-opacity:.8}.inquisitor{fill:var(--paradox-color);fill-opacity:.7}.line-woman{stroke:#b52727;stroke-width:4}.view-line{stroke:var(--primary-accent);stroke-width:1.5;stroke-dasharray:4 2;opacity:.7}.svg-label{font-family:'Georgia',serif;font-size:14px;fill:var(--sepia-text);text-anchor:middle}
#content-display{padding:20px;background-color:#fff;border:1px solid var(--border-color)}#content-display h2{font-family:'Georgia',serif;font-weight:700;color:var(--sepia-text);border-bottom:1px solid var(--border-color);padding-bottom:10px;margin-bottom:1.5em}#content-display p{margin-bottom:1.2em;text-align:justify}.sphere-commentary{background-color:#e9e9fd;border-left:3px solid var(--primary-accent);padding:15px 20px;margin:2em 0;font-style:italic;color:#3f425b}.sphere-commentary::before{content:"Sphere's Log: ";font-weight:700;display:block;margin-bottom:8px;font-style:normal;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%234a4e69' fill-opacity='0.8' stroke='%232c2f45' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left center;padding-left:22px}.unlockable-commentary{display:none;opacity:0;transition:opacity .5s ease-in-out}.unlockable-commentary.unlocked{display:block;opacity:1}
#game-ui-container{width:280px;flex-shrink:0;background-color:#ede7da;border-left:1px solid var(--border-color);padding:20px;height:100vh;position:sticky;top:0}.ui-panel{margin-bottom:30px}.ui-panel h3{font-family:'Georgia',serif;color:var(--sepia-text);border-bottom:1px solid var(--border-color);padding-bottom:5px;margin-top:0;font-size:1.1em}.status-display{margin-bottom:15px}.status-display label{display:block;font-size:.9em;margin-bottom:5px}.status-bar{width:100%;height:20px;background-color:#dcd3c1;border:1px solid #c9bfa8}.status-bar .fill{height:100%;width:0%;transition:width .5s ease-out}#enlightenment-fill{background-color:var(--enlightenment-color)}#paradox-fill{background-color:var(--paradox-color)}.status-display span{display:block;text-align:right;font-size:.8em;margin-top:3px;color:var(--secondary-accent)}
#ability-buttons{display:flex;flex-direction:column;gap:10px}.ability-btn{width:100%;padding:10px;font-family:'Georgia',serif;font-size:.9em;color:var(--sepia-text);background-color:var(--parchment-bg);border:1px solid var(--border-color);cursor:pointer;text-align:left;transition:background-color .2s,border-color .2s,box-shadow .2s}.ability-btn:hover:not(:disabled){background-color:#fff;border-color:var(--secondary-accent)}.ability-btn:active:not(:disabled){background-color:#e6dfd1}.ability-btn:disabled{color:var(--secondary-accent);cursor:not-allowed;background-color:#e6dfd1}
#tooltip{position:absolute;display:none;padding:10px;background-color:#2c2f45;color:var(--parchment-bg);border:1px solid var(--sepia-text);font-size:.9em;max-width:250px;z-index:1000;pointer-events:none}#tooltip.ingame-tag{padding:4px 8px;font-size:.8em;border-radius:4px}#tooltip strong{display:block;color:#fff;margin-bottom:5px;border-bottom:1px solid var(--secondary-accent);padding-bottom:3px}#tooltip .effect{font-style:italic;display:block;margin-bottom:8px}#tooltip .cost,#tooltip .reward{display:block;font-size:.9em}#tooltip .cost{color:#ff8fa3}#tooltip .reward{color:#a9d6a9}
#ending-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(44,47,69,.85);z-index:2000;display:none;align-items:center;justify-content:center}.ending-box{background-color:var(--parchment-bg);border:2px solid var(--border-color);padding:30px;max-width:600px;text-align:center}.ending-box h2{color:var(--sepia-text);border-bottom:1px solid var(--border-color);padding-bottom:15px}.ending-box p{font-style:italic;color:var(--primary-accent);margin-bottom:30px}#restart-btn{text-align:center;width:50%}
footer{position:fixed;bottom:0;left:0;width:100%;text-align:center;background-color:#ede7da;padding:5px 0;font-size:.8em;color:var(--secondary-accent);border-top:1px solid var(--border-color);z-index:10}
@keyframes whisper-pulse{0%{stroke-width:1;opacity:1}100%{stroke-width:15;opacity:0}}.whisper-ring{fill:none;stroke:var(--enlightenment-color);animation:whisper-pulse 2s ease-out infinite}
#enlightenment-cap-text{color:var(--paradox-color);font-weight:700;margin-left:5px}@keyframes capped-pulse{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}#enlightenment-fill.capped{animation:capped-pulse 1.5s infinite}.breakthrough-flash{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;animation:flash-anim .5s ease-out;pointer-events:none}@keyframes flash-anim{0%{opacity:.7}100%{opacity:0}}
.ability-btn.channeling{box-shadow:0 0 8px var(--enlightenment-color);border-color:var(--enlightenment-color)}.ability-btn.synergy-active{box-shadow:0 0 12px #ffd700;border-color:#ffd700}.whisper-ring.synergy{stroke:#ffd700}
#event-notification{position:fixed;top:-200px;left:50%;transform:translateX(-50%);width:90%;max-width:800px;background-color:var(--primary-accent);color:var(--parchment-bg);border:2px solid var(--sepia-text);border-top:none;z-index:1500;padding:15px;text-align:center;transition:top .5s ease-in-out}#event-notification.visible{top:0}#event-notification h4{margin:0 0 5px;font-family:'Georgia',serif;color:#fff}#event-notification p{margin:0 0 10px;font-size:.9em;font-style:italic}#event-timer-bar{position:absolute;bottom:0;left:0;height:5px;width:100%;background-color:var(--enlightenment-color);transition:width 1s linear}
#lineland-interlude{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#1a1a1a;z-index:3000;display:none;align-items:center;justify-content:center;flex-direction:column;color:#ccc}.lineland-container{width:80%;max-width:900px}#lineland-dialogue{height:60px;padding:10px;border:1px solid #444;background-color:#222;text-align:center;font-style:italic;margin-bottom:20px}#lineland-svg{width:100%;height:80px;background-color:#000;border:1px solid #444}#lineland-controls{display:flex;justify-content:center;gap:10px;margin-top:20px}#lineland-controls button{background-color:#333;border:1px solid #555;color:#ccc;padding:10px 20px;cursor:pointer}#lineland-controls button:hover{background-color:#444}#lineland-exit-hint{text-align:center;margin-top:20px;font-size:.8em;color:#666}.lineland-speak-effect{fill:none;stroke:#ff0;animation:whisper-pulse .5s ease-out}

.manual-button{background-color:transparent;border:1px solid var(--border-color);color:var(--sepia-text);cursor:pointer;padding:5px 10px;margin-top:10px;font-family:'Georgia',serif}
.manual-button:hover{background-color:var(--parchment-bg)}
#manual-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(44,47,69,.85);z-index:4000;display:none;align-items:center;justify-content:center}
.manual-content{position:relative;width:90%;max-width:800px;height:80vh;background-color:var(--parchment-bg);border:2px solid var(--border-color);padding:20px 40px;overflow-y:auto}
#close-manual-btn{position:absolute;top:10px;right:15px;font-size:2.5em;font-weight:700;color:var(--secondary-accent);background:0 0;border:none;cursor:pointer}
.manual-content h2,.manual-content h3{color:var(--sepia-text);border-bottom:1px solid var(--border-color);padding-bottom:10px}
.manual-content ul{list-style:square}
.manual-content pre{background-color:#ede7da;border:1px solid var(--border-color);padding:15px;white-space:pre-wrap;font-family:monospace,monospace}