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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #c9d1d9;
    background-color: #0d1117;
    overflow: hidden;
    line-height: 1.6;
}

.layout { display: flex; flex-direction: row; height: 100vh; width: 100vw; }

/* LEFT SIDE: LORE */
.article { width: 45%; height: 100%; padding: 50px 60px; overflow-y: auto; border-right: 1px solid #30363d; }
.article h1 { font-size: 2.5rem; color: #ff7b72; margin-bottom: 20px; }
.article h2 { font-size: 1.5rem; color: #e6edf3; margin-top: 30px; margin-bottom: 15px; }
.article p, .article ul { margin-bottom: 15px; font-size: 1.1rem; color: #8b949e; }
.article ul { margin-left: 20px; }
.article strong { color: #c9d1d9; }
hr { border: none; border-top: 1px solid #30363d; margin: 30px 0; }
code { background: #161b22; padding: 3px 6px; border-radius: 4px; color: #79c0ff; font-family: monospace; }

.git-steps li { margin-bottom: 10px; font-size: 1.05rem; color: #c9d1d9; }
.back-link { color: #8b949e; text-decoration: none; font-weight: bold; transition: 0.2s; }
.back-link:hover { color: #c9d1d9; }

/* RIGHT SIDE: THE SIMULATOR */
.simulator-container { width: 55%; height: 100%; display: flex; flex-direction: column; background: #010409; }

/* The Top Visualizer */
.git-visualizer {
    height: 50%;
    padding: 20px;
    display: flex;
    gap: 15px;
    background: #0d1117;
    border-bottom: 2px solid #30363d;
    transition: opacity 0.5s ease;
}

.git-zone {
    flex: 1;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    border: 1px solid #30363d;
    background: #161b22;
}

.git-zone h3 { text-align: center; font-size: 1.1rem; margin-bottom: 5px; }
.zone-desc { text-align: center; font-size: 0.8rem; color: #8b949e; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }

/* Zone Colors */
.workspace h3 { color: #ff7b72; } /* Red */
.staging h3 { color: #d2a8ff; } /* Purple */
.repo h3 { color: #7ee787; } /* Green */

.file-container, .commit-container { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }

/* The File Icons */
.git-file {
    background: #21262d;
    border: 1px solid #30363d;
    padding: 8px 12px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.9rem;
    color: #c9d1d9;
    flex-shrink: 0;
    animation: fadeIn 0.3s ease;
}
.git-file.tracked { border-left: 3px solid #d2a8ff; }
.git-file.untracked { border-left: 3px solid #ff7b72; }

/* The Commit Blocks */
.git-commit {
    background: #0d1117;
    border-left: 4px solid #7ee787;
    padding: 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    flex-shrink: 0;
    animation: slideDown 0.4s ease;
}
.commit-hash { color: #79c0ff; font-family: monospace; font-size: 0.8rem; margin-bottom: 4px; }
.commit-msg { color: #c9d1d9; }

@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* The Bottom Terminal */
#terminal-window {
    height: 50%;
    --background: #010409;
    --color: #c9d1d9;
    --size: 1.1;
    padding: 20px;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }



/* --- HIDE SIMULATOR ON MOBILE (FOOLPROOF METHOD) --- */

/* 1. Hide the warning box by default on Desktop */
#mobile-warning {
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 40px;
    background: #010409;
    color: #8b949e;
}

#mobile-warning h2 { color: #ff7b72; margin-bottom: 10px; }

/* 2. When the screen shrinks to a phone size... */
@media (max-width: 1000px) {


    /* --- FIX THE SCROLLING BUG --- */
    body { overflow-y: auto; }
    .article { overflow-y: visible; }
    
    /* Stack the text on top */
    .layout { flex-direction: column; height: auto; min-height: 100vh; }
    .article { width: 100%; height: auto; border-right: none; }

    /* Give the warning box a fixed height at the bottom */
    .simulator-container { width: 100%; height: 350px; border-top: 2px solid #30363d; }

    /* THE MAGIC SWAP: Hide the tools, show the warning */
    .git-visualizer { display: none !important; }
    #terminal-window { display: none !important; }
    #mobile-warning { display: flex !important; }
}