/* --- General & Initial Prompt --- */
body { margin: 0; font-family: 'Inter', sans-serif; background-color: #0d0d1a; color: #e0e0f0; overflow-x: hidden; }
#initial-prompt { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: center; padding: 20px; opacity: 0; animation: fade-in 1.5s forwards; }
#heartbeat-visual { width: 20px; height: 20px; background-color: #9aff9a; border-radius: 50%; box-shadow: 0 0 30px #9aff9a; animation: heartbeat 2s infinite ease-in-out; margin-bottom: 30px; }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes fade-in { to { opacity: 1; } }
.mode-selection { display: flex; gap: 20px; margin: 20px 0; }
.mode-button { background: transparent; border: 1px solid #5a0080; color: #bbeaff; padding: 10px 20px; font-family: 'Courier New', Courier, monospace; cursor: pointer; transition: background-color 0.3s, color 0.3s; }
.mode-button:hover { background-color: #9aff9a; color: #0d0d1a; }
.mode-description { font-size: 0.9em; color: #a0a0c0; max-width: 400px; }

/* --- Main Content Layout --- */
#main-container.visible { opacity: 0; animation: fade-in 1s 0.5s forwards; }
header { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #2a0050, #000033); color: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); border-radius: 0 0 15px 15px; }
h1 { font-size: 3.5em; margin-bottom: 10px; letter-spacing: 2px; text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.3); }
h2, h3 { position: relative; }
h2 { font-size: 2.2em; color: #9aff9a; margin-top: 40px; margin-bottom: 20px; border-bottom: 2px solid #5a0080; padding-bottom: 10px; }
h3 { font-size: 1.6em; color: #bbeaff; margin-top: 30px; margin-bottom: 15px; font-weight: 600; }
main { max-width: 900px; margin: 40px auto; padding: 0 20px; }
section.ai-guide-section { background-color: #1a1a33; padding: 30px 40px; margin-bottom: 40px; border-radius: 10px; border: 1px solid rgba(187, 234, 255, 0.1); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); position: relative; overflow: hidden; }
p, ul li { margin-bottom: 15px; font-size: 1.1em; }

/* --- Effects & Interactivity --- */
body:not(.mode-reduced) section.ai-guide-section:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(42, 0, 80, 0.5); }
body:not(.mode-reduced) p, body:not(.mode-reduced) ul li, body:not(.mode-reduced) h3 { transition: transform 0.1s linear; }
ul { list-style-type: none; padding-left: 0; }
ul li { background-color: #2a2a47; margin-bottom: 10px; padding: 15px 20px; border-left: 5px solid #9aff9a; border-radius: 5px; }
a { color: #bbeaff; text-decoration: none; border-bottom: 1px dotted #bbeaff; transition: color 0.3s; }
a:hover { color: #fff; border-bottom-color: #fff; }
.ai-description { font-style: italic; color: #c0c0e0; font-size: 1.2em; text-align: center; border: 1px dashed #5a0080; background-color: rgba(13, 13, 26, 0.5); padding: 20px; margin: 30px 0; border-radius: 5px; }

/* Glitch Effect (Conditional) */
body:not(.mode-reduced) h2::before, body:not(.mode-reduced) h2::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; opacity: 0; }
body:not(.mode-reduced) h2:hover::before, body:not(.mode-reduced) h2:hover::after { opacity: 1; animation: glitch-anim 300ms infinite linear alternate-reverse; }
h2::before { left: 2px; text-shadow: -2px 0 #ff00ff; color: inherit; }
h2::after { left: -2px; text-shadow: -2px 0 #00ffff, 2px 2px #ff00ff; color: inherit; animation-duration: 200ms; }
@keyframes glitch-anim { 0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); transform: translate(-3px, 0); } 100% { clip-path: polygon(0 75%, 100% 75%, 100% 80%, 0 80%); transform: translate(3px, 0); } }

/* Background & Particles (Conditional) */
#generativeBackground { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; transition: filter 1s ease-in-out; }
body.state-hasty #generativeBackground { filter: saturate(1.5) brightness(1.1); }
.mouse-particle { position: absolute; border-radius: 50%; pointer-events: none; opacity: 1; transform: translate(-50%, -50%); transition: transform 0.5s cubic-bezier(0,.8,.26,.99), opacity 0.5s ease-out; z-index: 9999; filter: blur(1.5px); }
body.mode-reduced .mouse-particle, body.mode-reader .mouse-particle, body.mode-reader #generativeBackground { display: none; }

/* Footer */
footer { text-align: center; padding: 40px 20px; color: #a0a0c0; font-size: 0.9em; margin-top: 50px; border-top: 1px solid rgba(255, 255, 255, 0.1); background-color: #1a1a33; }

/* Game & Final Insight */
#mini-game-container { border-color: #9aff9a; }
#game-board { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 20px; background-color: #0d0d1a; border-radius: 8px; }
#game-status { font-family: 'Courier New', Courier, monospace; font-size: 1.2em; color: #fff; min-height: 2em; text-align: center; }
.game-buttons-container { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.game-button { width: 100px; height: 100px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 8px; transition: all 0.1s ease; opacity: 0.7; cursor: not-allowed; }
.game-button.player-active { opacity: 1; cursor: pointer; }
.game-button.player-active:hover { transform: scale(1.05); }
#btn-0 { background-color: #00a1b0; } #btn-1 { background-color: #b00000; } #btn-2 { background-color: #b0a100; } #btn-3 { background-color: #00b03b; }
.game-button.lit { transform: scale(1.1); opacity: 1; box-shadow: 0 0 25px 5px currentColor; }
#start-game-btn { padding: 12px 25px; font-size: 1.1em; font-weight: 600; color: #0d0d1a; background-color: #9aff9a; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s; }
#start-game-btn:hover { background-color: #fff; }
#start-game-btn:disabled { background-color: #555; color: #888; cursor: not-allowed; }
#final-insight { display: none; color: #9aff9a; text-align: center; margin-top: 30px; border-top: 1px dashed #5a0080; padding-top: 20px; opacity: 0; transition: opacity 1s; }
#final-insight.visible { display: block; opacity: 1; }

/* Reader Mode Styles */
body.mode-reader { background: #f0f0f0; color: #111; }
body.mode-reader header { background: #ddd; color: #111; box-shadow: none; }
body.mode-reader h1, body.mode-reader h2, body.mode-reader h3, body.mode-reader a { color: #005a9c; text-shadow: none; }
body.mode-reader section.ai-guide-section { background: #fff; border-color: #ccc; box-shadow: none; }
body.mode-reader ul li { background-color: #eee; }
body.mode-reader blockquote { background: #eee; border-color: #005a9c; }
body.mode-reader #mini-game-container { display: none; }