/* Global CRT Terminal Styling */
body {
    background-color: #000000;
    color: #ffb000;
    font-family: "Lucida Console", "Courier New", monospace;
    margin: 0;
    padding: 20px;
    text-shadow: 0 0 4px rgba(255, 251, 0, 0.75);
    line-height: 1.4;
}

/* Scanline Overlay Effect */
body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0; left: 0; bottom: 0; right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 9999;
    background-size: 100% 4px, 6px 100%;
    pointer-events: none;
}

a {
    color: #ffb000;
    text-decoration: none;
    font-weight: bold;
}
a:hover {
    background-color: #ffb000;
    color: #000000;
    text-shadow: none;
}

/* 2. Layout Structure */
.grid-container {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

header, footer {
    grid-column: span 2;
    border: 1px solid #ffb000;
    padding: 15px;
    background: #050505;
    margin-bottom: 10px;
}

.ascii-logo {
    font-family: monospace;
    white-space: pre;
    font-size: 6px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.header-text {
    font-size: 14px;
    color: #aa8000;
    text-shadow: 0 0 4px rgba(255, 168, 0, 0.5);
}

.panel {
    border: 1px solid #ffb000;
    background: #050505;
    padding: 15px;
}

/* 3. Navigation Links */
.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-menu li {
    margin-bottom: 12px;
}
.nav-menu li::before {
    content: ">> ";
}

/* 4. Bulletin Board Posts */
.bbs-post {
    border-bottom: 1px dashed #554700;
    padding: 15px 0;
    display: flex;
    gap: 20px;
}
.bbs-post:last-child {
    border-bottom: none;
}
.post-meta {
    font-size: 12px;
    color: #aa8000;
    margin-bottom: 5px;
}
.post-heading {
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
}

/* 5. Retro Phosphor Image Filter Hack */
.anime-avatar {
    width: 80px;
    height: 80px;
    border: 1px solid #ffae00;
    object-fit: cover;
    /* Turns any color image into monochrome high-contrast PC-98 green */
    filter: grayscale(100%) contrast(250%) brightness(80%) sepia(100%) hue-rotate(-5deg) saturate(900%);
    image-rendering: pixelated;
}

/* Blinking Cursor Animation */
.cursor {
    animation: blink 1s infinite;
}
@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

#terminal-content {
   
    overflow-y: auto;
    overflow-x: hidden;
}

.binaries-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #ffb000;
}

.input-form {
    display: flex;
    background-color: #1a1200;
    margin: 0 30px;
    gap: 10px;
    justify-content: space-around;
}

.binary-item {
    display: flex;
    flex-direction: column;
    padding: 15px;
    margin: 5px;
    user-select: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    width: 100px;
    height: 100px;
}

.binary-item a {
    all: unset;
}

.binary-item:hover {
    background-color: #614200;
    color: #ffffff;
    text-shadow: none;
    cursor: pointer;
}

.binary-item:active {
    background-color: #ffb000;
    color: #000000;
}

.binary-label {
    font-size: 75px;
}

.binary-name {
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
}

#status {
    text-align: center;
    font-size: 16px;
    color: #aa8000;
    margin: 5px;
}

#diskstatus {
    text-align: right;
    font-size: 14px;
    color: #aa8000;
    margin: 5px;
}

.hidden-file-input {
    display: none !important;
}
.custom-file-button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: bold;
    color: #ffcc00; 
    border: 1px solid #ffaa00;
    font-family: monospace;
    cursor: pointer;
    text-transform: uppercase;
}

.custom-file-button:hover {
    background-color: #ffae00;
    color: #111;
    box-shadow: 0 0 8px #ff9900;
}

.custom-file-button:active {
    background-color: #ffffff;
    color: #000;
    box-shadow: inset 0 0 5px #ff9900;
}

.hidden {
    display: none !important; 
}

#progressContainer {
    width: 100%;
    background-color: #1a1200;
    border: 1px solid #ffb000;
    margin: 10px 30px
}

#progressBar {
    width: 0%;
    height: 20px;
    background-color: #ffb000;
    transition: width 0.3s ease-in-out;
}

#prgct {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    padding: 10px 30px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 10px;
}

table th,
table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #332700;
}

/* "Name" / "Size" / "Last modified" column headers */
table th {
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
    font-weight: bold;
    border-bottom: 1px solid #ffb000;
}

/* the <hr> separator rows Apache injects */
table th[colspan] {
    padding: 0;
    border: none;
}
table th[colspan] hr {
    border: none;
    border-top: 1px solid #554700;
    margin: 4px 0;
}

/* size column tends to use align="right" */
table td[align="right"] {
    text-align: right;
    color: #aa8000;
    white-space: nowrap;
}

/* row hover */
table tr:hover td {
    background-color: #1a1200;
}

/* icon column */
table td img,
table th img {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

table a {
    font-weight: bold;
}

.ascii-logo a {
    color: #ffb000;
    text-decoration: none;
    font-weight: bold;
}

.ascii-logo a:hover {
    color: #ffb000;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
}

/* Outer container just reserves the correct scaled height
           and clips nothing horizontally so there's no stray scrollbar. */
#scale-outer {
    position: relative;
    width: 100%;
    height: 0; /* set dynamically by JS once content is measured */
    overflow: hidden;
}

/* Inner wrapper is always rendered at the original design width.
    Everything inside it behaves exactly as it always has —
    we only ever transform the whole block visually. */
#scale-wrapper {
    width: 1200px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}
#board {
    height: 600px
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #554700;
}
::-webkit-scrollbar-thumb:hover {
    background: #ffb000;
}

/* The outer box that hides the overlapping text */
.marquee-container {
  width: 100%;
  overflow: hidden; /* Hides the text that goes off-screen */
  white-space: nowrap; /* Prevents text from breaking into multiple lines */
  padding: 15px 0;
  box-sizing: border-box;
}

/* The wrapper holding both sets of text */
.marquee-content {
  display: inline-block;
  padding-left: 0;
  animation: marquee-scroll 15s linear infinite; /* Loops forever smoothly */
}

/* Forces text blocks to align perfectly back-to-back */
.marquee-content span {
  display: inline-block;
}

/* Pause the scrolling effect when the user hovers over the text */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

/* The movement logic: shift the text left by exactly half its double-width */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.bbs-form-container {
    width: 90%;
    margin: 10px auto;
    border: 2px solid #ffaa00;
    padding: 10px;
    background: #110a00;
}

.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.input-group.text-group {
    align-items: flex-start;
}

.prompt {
    font-family: 'VT323', monospace;
    color: #ffaa00;
    font-size: 18px;
    white-space: pre; /* Keeps padding spaces intact */
    margin-right: 10px;
}

/* Master styling for data inputs */
.bbs-form-container input, 
.bbs-form-container textarea {
    background: #0c0700;
    border: 1px solid #cc8800;
    color: #ffaa00;
    font-family: 'VT323', monospace;
    font-size: 14px;
    padding: 4px 8px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

.bbs-form-container input:focus, 
.bbs-form-container textarea:focus {
    border-color: #ffaa00;
    box-shadow: 0 0 5px rgba(255, 170, 0, 0.4);
}

.bbs-form-container textarea {
    resize: vertical;
}

#submit-post-btn {
    width: auto;
    display: block;
    margin: 10px 0 0 auto; /* Push down and align right */
}

.post-body {
    min-width: 0;
    max-width: 100%;

    overflow-wrap: break-word;
    word-wrap: break-word;
    text-wrap: pretty;
}

.post-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-wrap: pretty;
}

#submit-post-btn {
    background-color: #0c0700;
    color: #ffaa00;
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    border: 2px dashed #cc8800; /* Dashed line gives it a classic utility aesthetic */
    padding: 6px 16px;
    cursor: pointer;
    user-select: none;
    display: block;
    margin: 15px 0 0 auto; /* Snaps it cleanly to the bottom right of the form */
    transition: none; /* Instant text terminal response */
}

/* Inverted look for selection / hovering */
#submit-post-btn:hover {
    background-color: #ffaa00;
    color: #0c0700;
    border-style: solid;
    border-color: #ffaa00;
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.4);
}

/* Depressed click simulation */
#submit-post-btn:active {
    background-color: #cc8800;
    color: #0c0700;
}

button {
    background-color: #0c0700;
    color: #ffaa00;
    font-family: 'VT323', monospace;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #ffaa00;
    border-radius: 0; /* Zero curves on a BBS */
    padding: 6px 14px;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
}

/* Instant terminal inversion */
button:hover{
    background-color: #ffaa00;
    color: #0c0700;
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
}

button:active {
    background-color: #cc8800;
    border-color: #cc8800;
}

/* --- Clickable BBS Links --- */
.bbs-link {
    color: #ffaa00;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px dashed #ffaa00;
}

.bbs-link:hover {
    background-color: #ffaa00;
    color: #0c0700;
    border-bottom-style: solid;
}

/* --- Inline Image Formatting --- */
.bbs-embedded-image-wrap {
    margin: 10px 0;
    border: 1px dashed #cc8800;
    padding: 8px;
    background-color: #110a00;
    max-width: 100%;
    display: inline-block;
}

/* Hidden metadata banner above the picture */
.bbs-embedded-image-wrap .alt-text {
    font-size: 0.9rem;
    color: #cc8800;
    margin-bottom: 5px;
}

.bbs-inline-img {
    max-width: 100%;
    max-height: 400px; /* Prevents giant images from ruining your page flow */
    height: auto;
    display: block;
    border: 1px solid #ffaa00;
    
    /* Converts raw colorful user images into amber phosphor style */
    filter: sepia(1) saturate(6) hue-rotate(5deg);
}

/* Flashing terminal sync node */
.bbs-pulse::after {
    content: " ◉ SYNCING";
    font-size: 0.7rem;
    color: #ffaa00;
    animation: terminal-blink 1.5s infinite steps(2);
    vertical-align: middle;
    opacity: 0.6;
}

@keyframes terminal-blink {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}