/* ================================
   INTENT: forumline.net styles

   The visual identity is neocities/personal web — deliberately not
   a polished SaaS landing page. This is a brand choice: forumline
   is for people who want the old web back, and the site should
   feel like it belongs to that world. The aesthetic builds trust
   with our audience by signaling we share their values.

   The "create your forum" CTA and download links must stand out
   visually above everything else — they are the business goals
   of this page.
   ================================ */

@import url('https://fonts.cdnfonts.com/css/w95fa');

/* --- SCROLLBAR --- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #080810; }
::-webkit-scrollbar-thumb {
    background: #2a3a5a;
    border: 2px solid #080810;
}
::-webkit-scrollbar-thumb:hover { background: #3a5a8a; }

/* --- SELECTION --- */
::selection { background: #3a5a8a; color: #ffe0c0; }

/* --- BASE --- */
body {
    margin: 0;
    padding: 0;
    background-color: #060810;
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(30, 50, 80, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(50, 30, 70, 0.1) 0%, transparent 50%),
        radial-gradient(1px 1px at 10% 15%, #ffffff22, transparent),
        radial-gradient(1px 1px at 30% 45%, #ffffff15, transparent),
        radial-gradient(1px 1px at 50% 80%, #ffffff1a, transparent),
        radial-gradient(1px 1px at 70% 25%, #ffffff20, transparent),
        radial-gradient(1px 1px at 90% 65%, #ffffff12, transparent),
        radial-gradient(1px 1px at 15% 75%, #ffffff18, transparent),
        radial-gradient(1px 1px at 45% 10%, #ffffff22, transparent),
        radial-gradient(1px 1px at 65% 55%, #ffffff10, transparent),
        radial-gradient(1px 1px at 85% 85%, #ffffff15, transparent),
        radial-gradient(1px 1px at 25% 30%, #ffffff1a, transparent),
        radial-gradient(1px 1px at 55% 95%, #ffffff18, transparent),
        radial-gradient(1px 1px at 75% 50%, #ffffff12, transparent),
        radial-gradient(1px 1px at 5% 60%, #ffffff20, transparent),
        radial-gradient(1px 1px at 95% 40%, #ffffff15, transparent),
        radial-gradient(1px 1px at 40% 70%, #ffffff1a, transparent),
        radial-gradient(1px 1px at 60% 5%, #ffffff22, transparent);
    background-size: 100% 100%;
    font-family: 'W95FA', 'Courier New', monospace;
    font-size: 13px;
    color: #c0c8e0;
    line-height: 1.6;
}

a {
    color: #7eb8e8;
    text-decoration: none;
}
a:hover {
    color: #a0d0ff;
    text-shadow: 0 0 8px rgba(126, 184, 232, 0.5);
}
a:visited { color: #8a9ac8; }

/* --- FLOATING DECORATIONS --- */
.floating-decor {
    position: fixed;
    font-size: 24px;
    z-index: 100;
    opacity: 0.15;
    animation: float 4s ease-in-out infinite;
    pointer-events: none;
    color: #7eb8e8;
    font-family: 'W95FA', monospace;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- STAMP MARQUEE --- */
#stamp-marquee {
    background: #0a0c18;
    border-bottom: 1px solid #1a2a4a;
    padding: 4px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    overflow: hidden;
}

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.blinkie {
    display: inline-block;
    font-size: 9px;
    font-family: 'W95FA', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 10px;
    margin: 0 8px;
    background: #0f1520;
    border: 1px solid #2a3a5a;
    color: #8090b0;
    flex-shrink: 0;
}

/* --- HEADER --- */
#header {
    text-align: center;
    padding: 25px 10px 20px;
    border-bottom: 2px dashed #1a2a4a;
}
#header h1 {
    font-family: 'W95FA', monospace;
    font-size: 52px;
    color: #7eb8e8;
    margin: 0;
    text-shadow:
        3px 3px 0 #0a1020,
        0 0 20px rgba(126, 184, 232, 0.3),
        0 0 40px rgba(60, 100, 180, 0.15);
    letter-spacing: 4px;
}
.headertext {
    color: #8aa0c0;
    font-size: 12px;
    margin-top: 5px;
    letter-spacing: 1px;
}

/* --- PAGE LAYOUT --- */
#page {
    width: 920px;
    margin: 15px auto;
    position: relative;
    min-height: 600px;
}

#leftbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 195px;
}

#mainbox {
    margin-left: 205px;
    margin-right: 215px;
}

#rightbox {
    position: absolute;
    right: 0;
    top: 0;
    width: 205px;
}

/* --- PANELS --- */
.panel {
    margin-bottom: 10px;
    border: 2px solid #1a2a4a;
    background: rgba(8, 12, 24, 0.9);
    overflow: hidden;
}

.panel-title {
    font-family: 'W95FA', monospace;
    font-size: 14px;
    background: #0c1428;
    color: #e8c060;
    padding: 5px 10px;
    border-bottom: 1px solid #1a2a4a;
    text-transform: lowercase;
    letter-spacing: 1px;
}

.panel-body {
    padding: 10px;
}

.panel-body p {
    margin: 0 0 10px;
}
.panel-body p:last-child {
    margin-bottom: 0;
}

/* --- NAVIGATION --- */
.navlist {
    list-style: none;
    margin: 0;
    padding: 8px;
}
.navlist li {
    margin-bottom: 6px;
    font-size: 12px;
}
.navlist li a {
    margin-left: 4px;
}

/* --- STATUS DOT --- */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #4a8a4a;
    border-radius: 50%;
    margin-right: 4px;
    animation: pulse 2s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- FEATURE BOX --- */
.feature-box {
    background: #0a0e1a;
    border: 1px dashed #1a2a4a;
    padding: 12px;
    margin: 12px 0;
}
.feature-box-title {
    color: #e8c060;
    font-size: 13px;
    margin-bottom: 8px;
    letter-spacing: 1px;
    text-align: center;
}
.feature-box p {
    margin: 0;
    font-size: 12px;
}

/* --- FEATURE GRID --- */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.feature-item {
    background: #0a0e1a;
    border: 1px solid #1a2a4a;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    transition: border-color 0.2s;
}
.feature-item:hover {
    border-color: #3a5a8a;
}
.feature-icon {
    font-size: 20px;
    margin-bottom: 4px;
}
.feature-item b {
    color: #e8c060;
    display: block;
    margin-bottom: 4px;
}
.feature-desc {
    font-size: 10px;
    color: #8090b0;
    line-height: 1.4;
}

/* --- CTA --- */
.cta-box {
    text-align: center;
    margin: 15px 0;
    padding: 15px;
    border: 2px dashed #2a4a6a;
    background: #0a1020;
}
.cta-button {
    display: inline-block;
    font-family: 'W95FA', monospace;
    font-size: 16px;
    color: #060810 !important;
    background: #e8c060;
    padding: 8px 24px;
    border: 2px solid #c0a040;
    text-shadow: none !important;
    letter-spacing: 1px;
    transition: all 0.2s;
}
.cta-button:hover {
    background: #f0d080;
    border-color: #e8c060;
    box-shadow: 0 0 15px rgba(232, 192, 96, 0.3);
    text-shadow: none !important;
}

/* --- FORUM CREATION FORM --- */
.form-group {
    margin-bottom: 10px;
    text-align: left;
}
.form-label {
    display: block;
    font-size: 11px;
    color: #e8c060;
    margin-bottom: 3px;
    letter-spacing: 1px;
}
.form-input {
    width: 100%;
    font-family: 'W95FA', monospace;
    font-size: 13px;
    color: #c0c8e0;
    background: #060810;
    border: 1px solid #1a2a4a;
    padding: 6px 8px;
    box-sizing: border-box;
    outline: none;
}
.form-input:focus {
    border-color: #3a5a8a;
    box-shadow: 0 0 8px rgba(126, 184, 232, 0.15);
}
.form-input::placeholder {
    color: #3a4a6a;
}
.slug-input-row {
    display: flex;
    align-items: center;
}
.slug-input-row .form-input {
    flex: 1;
    border-right: none;
}
.slug-suffix {
    font-family: 'W95FA', monospace;
    font-size: 11px;
    color: #5a6a7a;
    background: #0a0e1a;
    border: 1px solid #1a2a4a;
    padding: 6px 8px;
    white-space: nowrap;
}
.form-error {
    font-size: 11px;
    color: #c05050;
    margin-bottom: 8px;
    text-align: left;
}
button.cta-button {
    cursor: pointer;
    width: 100%;
    font-family: 'W95FA', monospace;
}
button.cta-button:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* --- DEMO BUTTON --- */
.demo-button {
    display: inline-block;
    font-family: 'W95FA', monospace;
    font-size: 13px;
    color: #7eb8e8 !important;
    border: 1px solid #2a4a6a;
    padding: 6px 16px;
    transition: all 0.2s;
}
.demo-button:hover {
    border-color: #7eb8e8;
    box-shadow: 0 0 10px rgba(126, 184, 232, 0.2);
    text-shadow: 0 0 8px rgba(126, 184, 232, 0.5) !important;
}

/* --- DOWNLOADS --- */
.download-section {
    margin-bottom: 10px;
}
.download-label {
    font-size: 11px;
    color: #e8c060;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    border-bottom: 1px dotted #1a2a4a;
    padding-bottom: 3px;
}
.download-btn {
    display: block;
    font-family: 'W95FA', monospace;
    font-size: 11px;
    color: #c0c8e0 !important;
    padding: 5px 8px;
    margin-bottom: 3px;
    border: 1px solid #1a2a4a;
    background: #0a0e1a;
    transition: all 0.2s;
    text-align: center;
}
.download-btn:hover {
    border-color: #3a5a8a;
    background: #0f1828;
    text-shadow: 0 0 8px rgba(126, 184, 232, 0.3) !important;
}
.download-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: #5a6a7a !important;
}
.download-btn.disabled:hover {
    border-color: #1a2a4a;
    background: #0a0e1a;
    text-shadow: none !important;
}

/* --- LINKS --- */
.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.link-list li {
    margin-bottom: 5px;
}

/* --- TECH TAGS --- */
.tech-tag {
    display: inline-block;
    font-size: 9px;
    font-family: 'W95FA', monospace;
    padding: 2px 6px;
    margin: 2px;
    background: #0f1520;
    border: 1px solid #1a2a4a;
    color: #8090b0;
}

/* --- 88x31 BUTTONS --- */
.btn88x31 {
    width: 88px;
    height: 31px;
    font-size: 8px;
    font-family: 'W95FA', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f1520;
    border: 1px solid #1a2a4a;
    color: #8090b0;
    text-align: center;
    line-height: 1.1;
    margin: 2px;
}

.site-button {
    background: #0c1428;
    border-color: #2a4a6a;
    color: #7eb8e8;
    font-size: 9px;
}

.button-code {
    width: 170px;
    height: 28px;
    overflow: auto;
    padding: 3px;
    font-size: 9px;
    background: #0a0e1a;
    color: #8090b0;
    border: 1px solid #1a2a4a;
    margin-top: 6px;
    resize: none;
    font-family: 'Courier New', monospace;
}

/* --- FORUM DIRECTORY --- */
.directory-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.directory-card {
    display: block;
    background: #0a0e1a;
    border: 1px solid #1a2a4a;
    padding: 10px;
    transition: all 0.2s;
    text-decoration: none !important;
}
.directory-card:hover {
    border-color: #3a5a8a;
    background: #0f1828;
    box-shadow: 0 0 12px rgba(126, 184, 232, 0.1);
}
.dir-name {
    font-size: 13px;
    font-weight: bold;
    color: #e8c060;
    margin-bottom: 2px;
}
.dir-domain {
    font-size: 10px;
    color: #5a6a7a;
    margin-bottom: 6px;
}
.dir-desc {
    font-size: 11px;
    color: #8090b0;
    line-height: 1.4;
    margin-bottom: 6px;
}
.dir-caps {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.dir-cap {
    font-size: 8px;
    font-family: 'W95FA', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    background: #0f1520;
    border: 1px solid #1a2a4a;
    color: #6a8ab0;
}

/* --- FOOTER --- */
#footer {
    text-align: center;
    padding: 15px;
    border-top: 2px dashed #1a2a4a;
    color: #4a5a7a;
    font-size: 11px;
    margin-top: 20px;
    width: 920px;
    margin-left: auto;
    margin-right: auto;
}
#footer a {
    color: #6a8ab0;
}

.construction {
    font-size: 10px;
    margin-top: 8px;
    color: #3a4a6a;
    letter-spacing: 1px;
}