/* --- 1. SETTINGS & VARIABLES --- */

:root {

    --bg-color: #000000;

    --text-color: #ffffff;

    --accent: #ff4500; /* Signature Milgram Orange */

    --accent-dim: rgba(255, 69, 0, 0.15); 

    --font-serif: 'Noto Serif JP', serif;

    --font-sans: 'Helvetica Neue', Arial, sans-serif;

    --font-mono: 'Courier New', Courier, monospace;

}



/* --- 2. GLOBAL RESET & BACKGROUNDS --- */

body {

    background-color: var(--bg-color);

    color: var(--text-color);

    font-family: var(--font-serif);

    margin: 0;

    padding: 0;

    letter-spacing: 1.5px;

    overflow-x: hidden;

    /* MILGRAM GRID */

    background-image: 

        linear-gradient(rgba(255, 69, 0, 0.05) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255, 69, 0, 0.05) 1px, transparent 1px);

    background-size: 40px 40px;

    background-attachment: fixed;

}



/* Global FX Layers */

.noise {

    position: fixed; top: 0; left: 0; width: 100%; height: 100%;

    z-index: 9999; opacity: .05; pointer-events: none;

    background-image: url('https://media.giphy.com/media/oEI9uWUicG3vA96u7I/giphy.gif');

}



.scanline {

    width: 100%; height: 100px; z-index: 9998;

    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0) 100%);

    opacity: 0.1; position: fixed; bottom: 100%;

    animation: scanline 8s linear infinite;

    pointer-events: none;

}



@keyframes scanline { 0% { bottom: 100%; } 100% { bottom: -100%; } }



.bg-img {

    position: fixed; top: 0; left: 0; width: 100%; height: 100%;

    background: url('your-background-image.jpg') center/cover no-repeat;

    filter: grayscale(1) brightness(0.2) contrast(1.2);

    z-index: -1; 

}



/* --- 3. INTRO GATE --- */

#gate {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #000;

    z-index: 10000;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition: opacity 0.6s ease;

    /* This ensures it stays on top of everything until hidden */

}



.gate-text {

    font-family: var(--font-mono);

    font-size: 10px; letter-spacing: 5px; margin-bottom: 30px; color: #666;

    animation: pulse 2s infinite;

}



@keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }



/* --- 4. LAYOUT WRAPPER --- */

#wrapper {

    max-width: 1100px;

    margin: 50px auto;

    padding: 0 20px;

}



.content-grid {

    display: grid;

    grid-template-columns: 40px 280px 1fr; /* 3 Columns for decoration, profile, and content */

    gap: 40px;

}



/* --- 5. COMPONENTS & BUTTONS --- */



/* Pointed Milgram Buttons */

.milgram-btn, .enter-btn {

    display: inline-block;

    background: #fff; /* Outer line */

    padding: 1px;

    clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0% 50%);

    text-decoration: none;

    cursor: pointer;

    border: none;

    transition: 0.3s;

}



.btn-inner {

    display: block;

    background: #000; /* Gap line */

    padding: 2px;

    clip-path: polygon(14px 0%, calc(100% - 14px) 0%, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0% 50%);

}



.btn-text {

    display: flex;

    align-items: center;

    justify-content: center;

    background: #fff; /* Main fill */

    color: #000;

    padding: 8px 30px;

    clip-path: polygon(13px 0%, calc(100% - 13px) 0%, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0% 50%);

    font-family: var(--font-serif);

    font-size: 13px;

    font-weight: bold;

    transition: 0.3s ease;

}



.milgram-btn:hover .btn-text, .enter-btn:hover .btn-text {

    background: var(--accent);

    color: #fff;

}



/* --- 6. HEADER & TEXT --- */

.milgram-header { text-align: center; margin-bottom: 50px; border-bottom: 1px solid #222; padding-bottom: 30px; }

.main-title { font-size: 3.5rem; font-weight: 900; margin: 0; letter-spacing: 10px; }

.sub-title { font-size: 0.8rem; opacity: 0.6; margin-top: 5px; font-family: var(--font-sans); }



.sys-status-bar {

    font-family: var(--font-mono);

    font-size: 9px; color: #888;

    display: flex; justify-content: space-between;

    border-bottom: 1px solid #222; padding-bottom: 8px; margin-bottom: 40px;

}



.orange-dot { color: var(--accent); animation: blink 2s infinite; }

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



/* Vertical Decor */

.vertical-decor { display: flex; flex-direction: column; align-items: center; opacity: 0.5; }

.v-line { width: 1px; height: 100px; background-color: #fff; margin-bottom: 15px; }

.v-text { writing-mode: vertical-rl; font-family: var(--font-sans); font-size: 10px; letter-spacing: 4px; }



/* --- 7. DOSSIER & ART --- */

.elegant-pfp { border: 1px solid #fff; padding: 5px; margin-bottom: 20px; }

.elegant-pfp img { width: 100%; display: block; filter: grayscale(50%); }



.dossier-data { font-family: var(--font-mono); font-size: 11px; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 15px 0; margin-bottom: 20px; color: #ccc; }

.data-row span { color: #fff; font-weight: bold; display: inline-block; width: 65px; }

.sys-msg { color: var(--accent); margin-top: 10px; text-shadow: 0 0 8px rgba(255, 69, 0, 0.4); }



.section-title { font-size: 1rem; border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 15px; }

.cinematic-frame { position: relative; border: 1px solid #333; padding: 10px; background: #050505; }

.main-art { width: 100%; display: block; transition: 0.5s; }

.main-art:hover { filter: brightness(1.1) contrast(1.1); }



/* Frame Corners */

.frame-corners::before, .frame-corners::after {

    content: ''; position: absolute; background: var(--accent);

}

.frame-corners::before { top: 10px; bottom: 10px; left: -5px; width: 1px; opacity: 0.5; }

.frame-corners::after { left: 10px; right: 10px; top: -5px; height: 1px; opacity: 0.5; }



/* --- 8. MOBILE RESPONSIVE --- */

@media (max-width: 800px) {

    .content-grid { display: flex; flex-direction: column; }

    .vertical-decor { display: none; }

    .side-panel { order: -1; text-align: center; padding: 20px; background: var(--accent-dim); }

    .elegant-pfp { width: 150px; margin: 0 auto 15px; border-color: var(--accent); }

    .main-title { font-size: 2.2rem; letter-spacing: 5px; }

    .top-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

}



/* --- SIDEBAR BUTTON FIX --- */

.social-links {

    margin-top: 30px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.social-label {

    font-family: var(--font-mono);

    font-size: 10px;

    color: var(--accent);

    margin-bottom: 5px;

    letter-spacing: 2px;

}



/* Forces sidebar buttons to be the same width */

.side-full {

    display: block !important;

    margin: 0 !important;

}



.side-full .btn-text {

    width: 100%;

    box-sizing: border-box;

    padding: 10px 0;

}



/* --- MAIN ARCHIVE BUTTON FIX --- */

.final-action-zone {

    margin-top: 60px;

    padding-top: 40px;

    border-top: 1px dashed #333;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.wide-archive-btn {

    width: 80%; /* Makes it look like a major call-to-action */

    max-width: 500px;

}



.wide-archive-btn .btn-text {

    font-size: 16px;

    padding: 15px 0;

    background: #fff; /* White background for the main action */

}



.v-line-short {

    width: 1px;

    height: 30px;

    background: var(--accent);

    margin-bottom: 20px;

}



/* --- COMPACT BUTTON & SPACING FIX --- */

.bottom-action-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 30px; /* Reduced from 80px */

    padding-bottom: 40px;

    width: 100%;

}



.decor-v-line {

    width: 1px;

    height: 30px; /* Shorter line */

    background: var(--accent);

    margin-bottom: 15px;

    opacity: 0.6;

}



/* The Button itself */

.archive-btn-compact {

    display: inline-block;

    width: auto; /* Let it shrink to text size */

}



.archive-btn-compact .btn-text {

    /* Adjusted padding to stop text hitting the points without being 'too big' */

    padding: 10px 45px; 

    font-size: 12px; /* Smaller text to match the UI */

    letter-spacing: 2px;

    white-space: nowrap;

}



/* --- SIDEBAR BUTTONS TWEAK --- */

/* To make the sidebar buttons look less "chunky" and more like your screenshot */

.social-links .milgram-btn {

    width: 140px; /* Narrower sidebar buttons */

    margin-bottom: 5px;

}



.social-links .btn-text {

    padding: 6px 0;

    font-size: 10px;

}



.tos-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    margin-top: 20px;

}



.subject-list {

    list-style: none;

    padding: 0;

    font-family: var(--font-mono);

    font-size: 11px;

}



.subject-list li {

    padding: 5px 0;

    border-bottom: 1px solid #222;

    color: #ccc;

}



/* The orange square bullet from your image */

.subject-list li::before {

    content: "■";

    color: var(--accent);

    margin-right: 10px;

    font-size: 8px;

}



/* --- MILGRAM FONT SETTINGS --- */

:root {

    --font-serif: 'Noto Serif JP', serif;

    --font-mono: 'JetBrains Mono', monospace;

}



/* Titles: SYSTEM_BIO.txt, LATEST_OUTPUT.jpg */

.section-title {

    font-family: var(--font-mono);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.15em;

    color: #ffffff;

    border-left: 3px solid var(--accent);

    padding-left: 10px;

    margin-bottom: 12px;

    text-transform: uppercase;

}



/* Body Text: Cinematic Serif Style */

.section-content p {

    font-family: var(--font-serif);

    font-size: 14px;

    line-height: 1.8;

    color: #dedede; /* Slightly dimmed for cinematic feel */

    letter-spacing: 0.05em;

    margin-bottom: 20px;

}



/* Sidebar Info: ID, ALIAS, LOC */

.dossier-data {

    font-family: var(--font-mono);

    font-size: 10px;

    letter-spacing: 0.2em;

    line-height: 2;

    text-transform: uppercase;

    color: #888;

}



.dossier-data span {

    color: #fff;

    font-weight: 700;

    margin-right: 15px;

}



.milgram-header {

    text-align: center;

    padding: 40px 0;

}



.sub-title {

    font-family: var(--font-mono);

    font-size: 10px;

    letter-spacing: 0.5em; /* Very wide spacing for that archive look */

    color: #666;

    text-transform: uppercase;

    margin-bottom: 25px;

}



.top-nav {

    display: flex;

    justify-content: center;

    gap: 15px;

}



.milgram-footer {

    text-align: left;            /* Align left to match the data stream look */

    margin-top: 40px;

    padding: 20px 0;

    border-top: 1px solid #222;

    font-family: var(--font-mono);

    font-size: 9px;

    letter-spacing: 3px;

    color: #fff;                 /* White text as seen in screenshot */

    opacity: 0.8;

}


/* --- REFINED MILGRAM BUTTONS --- */
.milgram-btn, .enter-btn {
    display: inline-block;
    background: #fff; /* The white border line */
    padding: 1px;
    /* Adjusted polygon for a sharper, slimmer point */
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0% 50%);
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: 0.3s ease;
    width: fit-content;
}

.btn-inner {
    display: block;
    background: #000; /* The black "gap" line */
    padding: 1.5px;
    clip-path: polygon(9px 0%, calc(100% - 9px) 0%, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0% 50%);
}

.btn-text {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff; /* Main fill color */
    color: #000;
    
    /* CRITICAL FIXES: Smaller font and balanced padding */
    font-family: var(--font-mono); 
    font-size: 10px; 
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    
    padding: 6px 25px; /* Horizontal padding (25px) keeps text away from the points */
    min-width: 80px;   /* Ensures buttons don't get too tiny */
    
    clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0% 50%);
    transition: 0.3s ease;
}

/* --- HOVER & ACTIVE STATES --- */
.milgram-btn:hover .btn-text, 
.active-page .btn-text {
    background: var(--accent); /* Milgram Orange */
    color: #fff;
}

/* --- THE GALLERY GRID --- */
.gallery-grid {
    display: grid;
    /* This creates the nice 3-column layout */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

/* --- THE IMAGE CONTAINER (THE FIX) --- */
.gallery-item {
    position: relative; /* CRITICAL: Keeps the orange bar inside the box */
    overflow: hidden;   /* CRITICAL: Hides the image corners when it zooms in */
    aspect-ratio: 1 / 1; /* Forces perfect squares */
    border: 1px solid #333;
    cursor: zoom-in;
    background: #000;
}

/* --- the ACTUAL IMAGE --- */
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Centers and crops the art perfectly */
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* --- THE ORANGE DATA LABEL --- */
.item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ff4500; /* Milgram Orange */
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    padding: 5px 10px;
    opacity: 0; /* Hides it until you hover */
    transition: 0.3s ease;
    z-index: 2;
    
    /* CRITICAL FIX: This stops the text bar from blocking your mouse clicks! */
    pointer-events: none; 
}

/* --- HOVER EFFECTS --- */
.gallery-item:hover .item-overlay {
    opacity: 1; /* Shows the orange bar */
}

.gallery-item:hover img {
    transform: scale(1.05); /* Cool tech zoom-in effect */
    filter: brightness(0.7); /* Darkens the image so the orange pops out */
}

/* --- THE JUDGE GRID --- */
.judge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates the two-column "Choice" look */
    gap: 20px;
    margin-top: 20px;
}

.judge-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #222;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.3s ease;
}

/* Highlighted card (like the 'Guilty' or 'Innocent' focus) */
.judge-card.highlight {
    border: 1px solid var(--accent);
    background: rgba(255, 69, 0, 0.05);
}

.judge-meta {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.price-data {
    color: var(--accent);
    font-weight: 700;
}

/* Typography */
.type-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    margin-bottom: 10px;
    color: #fff;
    border-left: 3px solid var(--accent);
    padding-left: 10px;
}

.description {
    font-size: 12px;
    color: #888;
    line-height: 1.5;
    margin-bottom: 15px;
}

.spec-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.spec-list li {
    font-size: 10px;
    color: #666;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 4px;
}

.spec-list li::before {
    content: "■ "; /* The Milgram square bullet */
    color: var(--accent);
}

/* Make buttons fill the card width */
.wide-btn {
    width: 100%;
}
.wide-btn .btn-text {
    width: 100%;
}

/* Container to hold the guestbook */
.atabook-frame-container {
    width: 100%;
    height: 700px; /* Adjust height based on your preference */
    border: 1px solid #222;
    background: rgba(255, 255, 255, 0.02);
    margin-top: 20px;
    overflow: hidden;
    position: relative;
}

/* The actual Iframe */
.guestbook-iframe {
    width: 100%;
    height: 100%;
    filter: invert(1) hue-rotate(180deg) brightness(0.8); 
    /* NOTE: Since Atabook is usually white, the 'filter' above 
       is a "hack" to make it look dark/techy to match your site. 
       If your Atabook theme is already dark, remove the filter line! 
    */
}

/* Hover effect to match Judge cards */
.atabook-frame-container:hover {
    border-color: var(--accent);
}

.tos-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.8;
    color: #888;
}

/* =========================================
   MOBILE RESPONSIVENESS (MILGRAM PROTOCOL)
   ========================================= */

@media (max-width: 800px) {
    /* 1. Stack the main layout instead of using columns */
    .content-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 15px; /* Adds breathing room on phone edges */
    }

    /* 2. Hide the vertical decor (it takes up too much horizontal space on phones) */
    .vertical-decor {
        display: none;
    }

    /* 3. Stack the Sidebar Profile above the Main Content */
    .side-panel {
        width: 100%;
        min-width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 20px;
        margin-bottom: 10px;
    }

    /* 4. Fix the Top Navigation (Makes buttons wrap 2-by-2) */
    .top-nav {
        flex-wrap: wrap;
        gap: 10px;
        padding: 0 10px;
    }
    
    .milgram-btn {
        flex: 1 1 45%; /* Buttons take up almost half the screen width */
    }

    .btn-text {
        width: 100%;
        padding: 8px 10px !important; 
        font-size: 9px !important; /* Slightly smaller text to fit */
    }

    /* 5. Stack the Commission "Judge" Cards vertically */
    .judge-container, .judge-grid {
        grid-template-columns: 1fr; /* Forces 1 column instead of 2 */
        gap: 20px;
    }

    /* 6. Shrink the massive header text */
    .main-title {
        font-size: 2.5rem; 
        letter-spacing: 10px;
    }

    .sub-title {
        font-size: 10px;
    }

    /* 7. Ensure Atabook iframe fits the screen */
    .atabook-frame-container {
        height: 600px;
    }
}

/* --- SYSTEM IMAGE VIEWER --- */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999; /* Always on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Dark background */
    backdrop-filter: blur(5px); /* Tech blur effect */
    cursor: zoom-out;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--accent); /* Milgram orange border */
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.2);
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--accent);
}

#modalCaption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: #888;
}