/* --- CSS Variables (Your Theme) --- */
:root {
    --bg-color: #000000;       /* True black background */
    --text-color: #cccccc;     /* Softer "console gray" */
    --color-eng: #00f0a0;    /* Bright green for 'eng' #00f0a0 */
    --color-sys: #26a1ff;    /* Bright blue for 'sys' */
    --prompt-base: #c8c8c8;   /* Dim gray for '@sim.ai' */
    --prompt-output: #c8c8c8;  /* Slightly brighter gray for '>' */
    --status-ok: #00ff00;      /* A classic bright green for 'OK' */
    --highlight: #ffffff;      /* Pure white for <strong> tags */
    --font-mono: 'IBM Plex Mono', monospace;
}

/* --- Base & Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    background-color: var(--bg-color);
}



body {
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 700;
    line-height: 2;
    width: 100%;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: "";
    position: fixed; /* Keeps it fixed in the viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* Puts it behind all other content */

    /* --- Your Image Settings --- */
    /* Replace with the path to your image */
    background-image: url('bg1.png');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    /* --- Your Transparency Setting --- */
    /* 0.1 = 10% opacity.
       Adjust this value (e.g., 0.05) to your liking. */
    opacity: 0.0;
}

#liquid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Ensures it stays behind generic HTML content */
}

/* --- Console Wrapper --- */
main.console {
    max-width: 90ch;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.console-section {
    margin-bottom: 2.5rem;
}

/* --- ADDED: Animation Hiding --- */
/* Hide sections by default if they are set to animate */
[data-animate] {
    opacity: 0;
}
/* When observer fires, fade it in */
[data-animate].visible {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* --- Section 1: Text Styling --- */

.console-section p {
    margin-bottom: 0.25rem;
    /* We no longer need any white-space rule here */
}

.line-content {
    display: inline;
    white-space: pre-wrap; /* <-- Apply the rule here instead */
}

.prompt {
    margin-right: 0.75rem;
    user-select: none;
}

.line-content {
    display: inline;
}


.prompt.output {
    color: var(--prompt-output);
}

.status-ok {
    color: var(--status-ok);
    font-weight: 700;
}

.mission-statement strong {
    color: var(--highlight);
    font-weight: 700;
    /* background-color: rgba(255, 255, 255, 0.1); */
    /* font-size: 1.5rem; */
}

.contact-info strong {
    color: var(--highlight);
    font-weight: 700;
    /* background-color: rgba(255, 255, 255, 0.1);
    font-size: 1.5rem; */
}

/* --- Visual Separator --- */
hr.separator {
    border: 0;
    height: 1px;
    background-color: var(--prompt-output);
    margin: 1.5rem 0;
}

/* --- ADDED: JS Typing Cursor --- */
.typing-cursor {
    font-weight: 700;
    color: var(--text-color);
    animation: blink 1s step-end infinite;
    margin-left: 0.1em;
}

/* --- Blinking Cursor (for the end of the page) --- */
.cursor {
    font-weight: 700;
    color: var(--text-color);
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* --- ADDED: User Prompt Style --- */
/* --- UPDATED: Prompt Styling --- */
.prompt.user,
.prompt.system {
    color: var(--prompt-base); /* This styles the '@sim.ai' part */
}

.prompt .user-type {
    font-weight: 700; /* Make the 'eng' and 'sys' parts bold */
}

.prompt .user-type.eng {
    color: var(--color-eng);
}

.prompt .user-type.sys {
    color: var(--color-sys);
}

/* --- ADDED: Principle List Styling --- */
/* Makes the [PRINCIPLE_XX] prompts stand out */
.principles-list .prompt.output {
    color: var(--text-color); /* Brighter than normal output */
    font-weight: 700;
}

/* --- ADDED: Simulation Widget Placeholder --- */
.simulation-widget-placeholder {
    width: 100%;
    height: 300px; /* You can adjust this */
    background-color: #111; /* A slightly lighter black */
    border: 1px dashed var(--prompt-output);
    margin-top: 1rem;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--prompt-output);
    font-style: italic;
    white-space: normal; /* Allow text to wrap inside placeholder */
}

/* --- ADDED: Final Prompt Styling --- */
.final-prompt p {
    margin-top: 2.5rem; /* Give it space from the last section */
}

/* --- ADDED: Styling for links in contact section --- */
.contact-info a {
    color: var(--color-sys); /* CHANGED */
    text-decoration: underline;
}
.contact-info a:hover {
    background-color: var(--color-sys); /* CHANGED */
    /* ... */
}

/* --- ADDED: Final Form Styling --- */
.final-prompt {
    /* Hide by default, will be faded in by JS */
    opacity: 0;
    transition: opacity 0.5s ease-in 0.5s; /* 0.5s delay */
    margin-top: 2.5rem;
}

.final-prompt form {
    display: flex; /* Aligns [USER] email > [input] on one line */
    align-items: center;
}

/* This is for the "email >" part */
.prompt-label {
    margin-right: 0.75rem;
    color: var(--prompt-output);
}

#email-input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 1em; /* Inherit from body */
    line-height: 1.6;
    width: 100%; /* Take up remaining space */
    caret-color: var(--text-color); /* The blinking typing cursor */
}

/* For success/error messages */
.form-status {
    margin-top: 0.5rem;
    /* Hide by default, show with JS */
    display: none;
}

/* Simulation classes */
.container {
            text-align: center;
            margin: 20px;
        }

#mode-selector {
    display: flex;
    padding-left: 16px;
    margin-bottom: 0px;
    z-index: 0;
}

.mode-tab {
    background-color: #222; /* Dark inactive background */
    color: #999; /* Dim text for inactive */
    border: 2px solid #444;
    border-bottom: none;
    padding: 8px 16px;
    border-radius: 12px 12px 0 0; /* Rounded top edges */
    cursor: pointer;
    font-family: 'Inter', sans-serif; /* Matching your existing font */
    font-weight: 600;
    transition: all 0.2s ease;
    margin-right: 4px; /* Tiny gap between tabs */
}

.mode-tab:hover {
    background-color: #333;
    color: #ccc;
}

/* The "Selected" state */
.mode-tab.active {
    background-color: #000; /* Match canvas background exactly */
    color: #fff; /* Bright white text */
    border-color: #fff; /* Bright white outline */
    padding-bottom: 10px; /* Extra padding to compensate for overlap */
    margin-bottom: 0px; /* Pushes it down over the canvas border */
}

#particleCanvas {
    border: 2px solid #fff; /* The white outline for the main box */
    background-color: #000;
    display: block; /* Removes default inline-canvas gaps */
    z-index: 1;
}

#simulationCanvas {
    border: 2px solid #4a5568;
    background-color: #2d3748;
    border-radius: 8px;
    cursor: grab;
}
.controls {
    margin-top: 20px;
}
.btn {
    padding: 10px 20px;
    font-size: 16px;
    margin: 0 10px;
    border-radius: 8px;
    border: none;
    background-color: #26a1ff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn:hover {
    background-color: #0056b3;
}
.btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-family: sans-serif;
    font-size: 16px;
    color: #cbd5e0; /* Light gray text for readability */
    background-color: #2d3748; /* Slightly lighter dark background for the container */
    margin-top:15px;
    padding: 10px 10px;
    border-radius: 12px;
}


.slider-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- Styling the Range Slider --- */
input[type=range] {
    -webkit-appearance: none; /* Hides the default slider styles */
    appearance: none;
    width: 200px;
    background: transparent; /* The track should be transparent so we can style it */
    cursor: pointer;
}


/* Track Styles */
input[type=range]::-webkit-slider-runnable-track {
    background: #4a5568; /* Dark gray for the track */
    height: 8px;
    border-radius: 4px;
}
input[type=range]::-moz-range-track {
    background: #4a5568;
    height: 8px;
    border-radius: 4px;
}

/* Thumb Styles */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px; /* Vertically center the thumb on the track */
    background-color: #26a1ff; /* Use the original accent color for the thumb */
    height: 20px;
    width: 20px;
    border-radius: 50%; /* Make it circular */
    border: 2px solid #1a202c; /* Border matches the page background */
}

input[type=range]::-moz-range-thumb {
    background-color: #26a1ff;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #1a202c;
}

@media (max-width: 600px) {
    .slider-container {
        flex-direction: column;
    }
    .slider-group {
            flex-direction: column;
            gap: 10px;
    }
    input[type=range] {
        width: 80%;
    }
    .container {
        padding: 0 10px;
    }
}
/* --- NEW: Responsive Styles for Portrait Mode --- */
@media (orientation: portrait) and (max-width: 900px) {
    .main-layout {
        flex-direction: row;
        align-items: center;
    }
    .all-controls {
        gap: 20px;
    }
    /* Arrange slider groups side-by-side */
    .slider-container {
        flex-direction: row;
        gap: 5px;
    }
    /* Stack items within each slider group vertically */
    .slider-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    /* Style the sliders to be vertical */
    .slider-group input[type=range] {
        -webkit-appearance: slider-vertical; /* For Chrome/Safari */
        writing-mode: bt-lr; /* For Firefox */
        width: 15px;
        height: 120px;
        padding: 0;
        margin: 0;
    }
}
/* --- ADDED: Backers List Styling --- */
.backers-list {
    /* Aligns this line with the text from the line above.
      calc(1ch + 0.75rem) = (width of the '>' prompt) + (prompt's margin)
    */
    padding-left: calc(1ch + 0.75rem);
    margin-top: 0.5rem; /* Adds a bit of space below the intro line */
    overflow-x: auto; /* Adds horizontal scroll if content overflows */
    overflow-y: hidden; /* Prevents any accidental vertical scroll */
}

.backer-name {
    font-size: 1rem; /* Makes font 25% larger */
    font-weight: 700;
    /* color: var(--highlight); */
    color: var(--prompt-base);
    margin-right: 1.5rem; /* Space between names */
}

.backers-list .line-content {
    white-space: nowrap; /* Forces all children onto a single line */
}

/* --- ADDED: Quadrant Section Styling --- */
.quadrant-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates the 2-column layout */
    grid-template-rows: auto auto;


    margin-top: 1.5rem;
    background-color: rgba(255, 255, 255, 0.02); /* Faint background */
}

.quadrant-cell {

    padding: 1.5rem;
    min-height: 160px; /* Gives all quadrants a uniform height */
}

/* Style the title prompts (SOVEREIGN>) inside the quadrant */
.quadrant-cell .prompt.output {
    color: var(--text-color); /* Make them brighter */
    font-weight: 700;
}

/* Override default <p> margin for tighter quadrant lines */
.quadrant-cell p {
    margin-bottom: 0.1rem;
    line-height: 1.4; /* Tighter line height */
}

.quadrant-cell:nth-child(odd) {
     border-right: 1px dashed var(--prompt-output);
}
/* Add the horizontal divider */
.quadrant-cell:nth-child(1),
.quadrant-cell:nth-child(2) {
     border-bottom: 1px dashed var(--prompt-output);
}


/* --- ADDED: Quadrant Mobile-Friendly --- */
@media (max-width: 768px) {
    .quadrant-grid {
        /* Stack them vertically */
        grid-template-columns: 1fr;
    }

    .quadrant-cell {
        min-height: auto;
        padding: 1.25rem;
    }

    /* --- UPDATED BORDER RULES FOR MOBILE --- */

    /* 1. Remove the desktop-specific borders */
    .quadrant-cell:nth-child(odd) {
        border-right: none;
    }
    .quadrant-cell:nth-child(1),
    .quadrant-cell:nth-child(2) {
        border-bottom: none;
    }

    /* 2. Add a border after each cell *except* the last one */
    .quadrant-cell:not(:last-child) {
        border-bottom: 1px solid var(--prompt-output);
    }
}