/* --- 1. GLOBAL BOARD RESET --- */
body {
    background-color: #1E1E1E;
    background-image: url("../images/bg_weatherBeaten.gif");
    font-family: Courier, monospace;
    margin: 0;
    padding: 15px;
    color: #EEEEEE;
    font-size: 9.8pt; /* Precision decimal sizing */
    text-align: center;
}

/* --- 2. TITLES & LINKS --- */
h1 {
    color: #FFD700;
    font-size: 1.8em;
    margin: 10px 0;
    text-shadow: 1px 1px 2px #000;
}

.thread-rules {
    font-size: 9pt; 
    margin-bottom: 20px;
    color: #BBBBBB;
}

a, a:visited, a:active {
    color: #FFD700 !important;
    text-decoration: none;
    font-weight: bold;
}

/* --- 3. POSTING FORM --- */
#board-wrapper {
    margin: 0 auto 30px auto;
    max-width: 500px;
    display: table;
}

table.postForm {
    background-color: #2A2A2A;
    border-collapse: collapse;
    border: 1px solid #990000;
    width: 100%;
}

table.postForm td {
    border: 1px solid #333333;
    padding: 4px;
    font-size: 8.8pt; /* Scaled down for the labels */
    text-align: left;
}

.form-label {
    background-color: #990000;
    color: #FFD700;
    font-weight: bold;
    padding: 0 10px !important;
    width: 80px;
    text-align: center;
}

input[type="text"], textarea {
    width: 96%;
    border: 1px solid #444;
    background-color: #121212;
    color: #FFFFFF;
    font-family: Courier, monospace;
    font-size: 9.8pt; /* Matches the body for consistency */
    padding: 2px;
}

button {
    background-color: #333;
    color: #FFD700;
    border: 1px outset #990000;
    cursor: pointer;
    font-weight: bold;
    padding: 3px 10px;
    font-family: Courier, monospace;
    font-size: 9pt;
}

/* --- 4. REPLIES & THREADS --- */
#thread-display {
    text-align: left;    /* Text inside posts stays left */
    width: 100%;         /* Let it use the full width */
    margin: 20px 0 0 0;  /* REMOVED 'auto' - This snaps the container to the LEFT */
    padding-left: 10px;  /* Small gap so posts don't touch the very edge of the screen */
    display: block;      /* Ensures it behaves like a full-width container */
}

.reply {
    background-color: #252525;
    border: 1px solid #990000;
    border-left: 4px solid #990000;
    display: table;      /* This keeps individual replies from stretching full-width */
    padding: 10px;
    margin: 8px 0;       /* Space between posts */
    font-size: 9.8pt;
    color: #EEEEEE;
    line-height: 1.25; 
}

hr { border: 0; border-top: 1px solid #444; margin: 20px 0; }

/* --- MOBILE RESPONSIVENESS --- */
@media screen and (max-width: 600px) {
    body {
        padding: 10px;
        font-size: 9pt; /* Slightly smaller for mobile */
    }

    #board-wrapper, .boardTable {
        width: 100% !important;
        max-width: 100% !important;
    }

    table.postForm {
        width: 100%;
    }

    .form-label {
        width: 60px; /* Slimmer labels for mobile */
        font-size: 8pt;
    }

    input[type="text"], textarea {
        width: 92%; /* Prevent horizontal scrolling */
    }

    .reply {
        max-width: 98%;
        display: block; /* Allows post to fill width */
    }
}