/* S.A.M. CORE BRANDING */
        :root {
            --cyan: #00FFFF;
            --dark-cyan: #003333;
            --warning-gold: #ffaa00;
            --bright-glow: 0 0 15px rgba(0, 255, 255, 0.5);
            --essential: #00FF00;
            --stable: #FFFF00;
            --legacy: #FFFFFF;
            --bright-glow: 0 0 15px rgba(0, 255, 255, 0.5);
        }

        /* VINTAGE SCANLINE OVERLAY */
        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.1) 50%), 
                        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
            z-index: 100;
            background-size: 100% 3px, 2px 100%;
            pointer-events: none;
        }

        body {
            background-color: #000;
            color: var(--cyan);
            font-family: 'Courier New', Courier, monospace;
            margin: 0;
            padding: 0;
        }

        #terminal-wrapper {
            max-width: 1200px; /* The "Golden Limit" */
            margin: 0 auto;    /* Centers the terminal on the screen */
            padding: 20px;
            background: radial-gradient(circle at center, #011515 0%, #000 100%);
            min-height: 100vh;
            box-sizing: border-box;
        }


        /* NAVIGATION */
        nav {
            border-bottom: 2px solid var(--cyan);
            padding-bottom: 10px;
            margin-bottom: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav a {
            color: var(--cyan);
            text-decoration: none;
            padding: 5px 15px;
            border: 1px solid transparent;
            text-transform: uppercase;
        }

        nav a:hover {
            background: var(--dark-cyan);
            border: 1px solid var(--cyan);
        }

        /* HEADER */
        .header-main h1 {
            font-size: 4em;
            margin: 0;
            letter-spacing: 8px;
            text-shadow: var(--bright-glow);
        }

        .status-line {
            background: var(--cyan);
            color: #000;
            padding: 2px 12px;
            font-weight: bold;
            display: inline-block;
        }

        /* 1. Base Grid - Common to all pages */
        .grid-layout {
            display: grid;
            gap: 40px;
            margin-top: 40px;
        }

        /* 2. Modifier: Balanced 50/50 (For Index) */
        .grid-layout.balanced {
            grid-template-columns: 1fr 1fr;
        }

        /* 3. Modifier: Article Sidebar 70/30 (For Reports/Asteroids) */
        .grid-layout.sidebar-layout {
            grid-template-columns: 7fr 3fr;
        }

        /* 4. Grid Header (For Index/Reports top sections) */
        .grid-header { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 30px; 
        }

        .section-box {
            border: 1px solid var(--dark-cyan);
            padding: 20px;
            background: rgba(0, 255, 255, 0.02);
            margin-bottom: 25px;
            line-height: 1.6;
        }

        h2 {
            border-bottom: 1px solid var(--cyan);
            padding-bottom: 5px;
            text-transform: uppercase;
        }

        .image-node {
            width: 100%;
            height: 300px;
            opacity: 0.8; /* Makes it look like a projection */
            transition: opacity 0.3s ease;
            background: var(--dark-cyan);
            box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.2); /* Interior glow */
            margin-bottom: 15px;
            border: 1px solid var(--cyan);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--cyan);
            overflow: hidden;
        }
        
        .image-node img { width: 100%; height: 100%; object-fit: contain; background-color: #000; } 

        .image-node:hover img {
             opacity: 1; /* Highlights when you hover over it */
             filter: brightness(1.5);
         }

        /* WARNING & CHALLENGE SECTION */
        .warning-box {
            border: 1px solid var(--warning-gold);
            padding: 20px;
            margin-top: 20px;
            color: var(--warning-gold);
        }

        .btn-contact {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 25px;
            border: 2px solid var(--cyan);
            color: var(--cyan);
            text-decoration: none;
            font-weight: bold;
            transition: 0.3s;
        }

        .btn-contact:hover {
            background: var(--cyan);
            color: #000;
            box-shadow: var(--bright-glow);
        }

        /* SUBTLE AMBIENT GLOW ANIMATION */
        @keyframes ambient {
            from { text-shadow: 0 0 10px rgba(0, 255, 255, 0.2); }
            to { text-shadow: 0 0 15px rgba(0, 255, 255, 0.5); }
        }
        h1, h2 { animation: ambient 3s infinite alternate; }
        strong {
            color: var(--cyan);
            text-shadow: 0 0 8px rgba(0, 255, 255, 0.8);
        }
        /* RATING PROTOCOL BOXES */
        .protocol-display { display: flex; gap: 15px; margin-top: 15px; }
        .protocol-card { flex: 1; padding: 15px; border: 1px solid transparent; text-align: center; }
        .essential-box { border-color: var(--essential); color: var(--essential); box-shadow: inset 0 0 10px rgba(0,255,0,0.1); }
        .stable-box { border-color: var(--stable); color: var(--stable); }
        .legacy-box { border-color: var(--legacy); color: var(--legacy); }

        /* DATA TABLE */
        .archive-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        .archive-table th { background: var(--dark-cyan); color: var(--cyan); text-align: left; padding: 12px; border: 1px solid var(--cyan); text-transform: uppercase; }
        .archive-table td { padding: 15px; border: 1px solid var(--dark-cyan); vertical-align: middle; }
        /* IMAGE HANDLING */
        .thumb-box { 
            width: 130px; 
            height: 100px; 
            border: 1px solid var(--cyan); 
            background: #000; 
            overflow: hidden; 
            display: flex; 
            align-items: center; 
            justify-content: center;
            margin: 0 auto;
            box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.3); /* Adds a 'CRT' internal glow */
        }
        img { 
            width: 100%; 
            height: 100%; 
            object-fit: contain; /* This fills the box, removing letterboxing */
            filter: brightness(1.1) contrast(1.2); /* Boosts brightness and contrast for a 'glow' look */
        }

        .rating-label { font-weight: bold; padding: 2px 8px; border: 1px solid; display: inline-block; }
        .action-link.buy-btn {
            display: inline-block;
            color: var(--warning-gold);
            text-decoration: none;
            background: rgba(255, 170, 0, 0.05);
            border: 1px solid #664400; /* Darker gold border */
            border-left: 3px solid var(--warning-gold);
            padding: 6px 14px;
            margin: 4px 2px;
            font-size: 0.8em;
            text-transform: uppercase;
            font-weight: bold;
            transition: all 0.2s ease;
        }
        .action-link.buy-btn:hover {
            background: var(--warning-gold);
            color: #000;
            box-shadow: 0 0 15px var(--warning-gold);
            border-color: var(--warning-gold);
        }
        .action-link.review-btn {
            display: inline-block;
            color: var(--cyan);
            text-decoration: none;
            background: rgba(0, 255, 255, 0.05);
            border: 1px solid var(--dark-cyan);
            border-left: 3px solid var(--cyan);
            padding: 6px 14px;
            margin: 4px 2px;
           font-size: 0.8em;
           text-transform: uppercase;
           font-weight: bold;
           transition: all 0.2s ease;
        }
        .action-link.review-btn:hover {
            background: var(--cyan);
            color: #000;
            box-shadow: 0 0 15px var(--cyan);
            border-color: var(--cyan);
        }
       .action-link.noreview-btn {
           display: inline-block;
           color: #ff4444; /* Alert Red */
           text-decoration: none;
           background: rgba(255, 68, 68, 0.05);
           border: 1px solid #660000;
           border-left: 3px solid #ff4444;
           padding: 6px 14px;
           margin: 4px 2px;
           font-size: 0.8em;
           text-transform: uppercase;
           font-weight: bold;
           transition: all 0.2s ease;
           cursor: help; /* Changes cursor to a question mark/help icon */
        }

        .action-link.noreview-btn:hover {
            background: #ff4444;
            color: #000;
            box-shadow: 0 0 15px rgba(255, 68, 68, 0.6);
            border-color: #ff4444;
        }
        .terminal-link {
            color: var(--cyan);
            text-decoration: none;
            background: rgba(0, 255, 255, 0.1); /* Subtle glow background */
            padding: 0 6px;
            border-left: 2px solid var(--cyan);
            border-right: 2px solid var(--cyan);
            font-weight: bold;
            transition: all 0.2s ease;
            display: inline; /* Ensures no hard return */
        }

        .terminal-link:hover {
            background: var(--cyan);
            color: #000; /* Inverts colors on hover */
            text-shadow: none;
            box-shadow: 0 0 10px var(--cyan);
        }
        .game-title {
            position: relative;
            cursor: help;
            border-bottom: 1px dotted var(--dark-cyan);
        }
        .intel-report {
            display: none;
            position: absolute;
            left: 40px;
            top: 25px;
            width: 320px; /* Wider for extra data */
            background: #000;
            border: 1px solid var(--cyan);
            padding: 15px;
            z-index: 999;
            font-size: 0.85em;
            line-height: 1.4;
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
            pointer-events: none;
            border-left: 4px solid var(--cyan);
       }
       .intel-report::before {
           content: ">> S.A.M. SYSTEM_PROBE: DATA_FOUND";
           display: block;
           font-size: 0.7em;
           color: var(--cyan);
           margin-bottom: 10px;
           border-bottom: 1px solid var(--dark-cyan);
           padding-bottom: 4px;
       }
       .intel-label {
           color: var(--warning-gold);
           font-weight: bold;
           font-size: 0.9em;
       }
       .game-title:hover .intel-report {
           display: block;
       }
       /* THE DOSSIER SYSTEM - REFIXED */
       .dossier-node {
           border: 1px solid var(--cyan);
           background: #000;
           padding: 0;
           margin-bottom: 20px;
           box-shadow: var(--bright-glow);
           /* Float ensures the newspaper text wrap works */
           float: left; 
           margin-right: 25px;
           /* This ensures it centers the label inside the box */
           text-align: center; 
       }

       /* Modifier to flip the image to the right side */
       .dossier-node.right {
           float: right;
           margin-right: 0;
           margin-left: 25px;
       }

       .dossier-node img {
           display: block;
           width: 100%; /* Important: This makes the image follow the div's width */
           height: auto;
           border-bottom: 1px solid var(--cyan);
       }

       .fig-label {
           background: var(--cyan);
           color: #000;
           font-size: 0.75em;
           font-weight: bold;
           padding: 2px 10px;
           margin: 8px 5px; /* Creates the "badge" look */
           display: inline-block; /* Shrinks to text length */
           text-transform: uppercase;
           letter-spacing: 2px;
      }
        .buy-btn {
            display: block; /* Makes them stack vertically */
            margin-top: 15px;
            padding: 12px;
            text-decoration: none;
            color: var(--warning-gold);
            border: 1px solid #664400;
            border-left: 4px solid var(--warning-gold); /* The signature "Elite" stripe */
            background: rgba(255, 170, 0, 0.05);
            font-weight: bold;
            font-size: 0.9em;
            transition: all 0.3s ease;
         }

         .buy-btn:hover {
             background: rgba(255, 170, 0, 0.15);
             box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
             border-color: var(--warning-gold);
             transform: translateX(5px); /* Subtle slide effect on hover */
         }
         p {
             line-height: 1.6;
             text-shadow: 0 0 1px rgba(0, 255, 255, 0.3); /* Extremely subtle "phosphor" bleed */
         }
         .status-line {
             background: var(--cyan);
             color: #000;
             padding: 2px 12px;
             font-weight: bold;
             display: inline-block; 
             width: fit-content; 
             white-space: nowrap;
             overflow: hidden; 
             max-width: 0;
             animation: typing-fixed 2s steps(40, end) forwards;
         }

         @keyframes typing-fixed {
             from { max-width: 0; }
             to { max-width: 1000px; } /* A value larger than your longest sentence */
         }
  
         .dossier-node:hover img {
             cursor: crosshair;
             filter: brightness(1.2);
             /* '1' makes it play once per hover. 'forwards' keeps the final state. */
             animation: cyan-glitch 0.3s ease-out 1 forwards;
         }

         @keyframes cyan-glitch {
             0% {
                 transform: translateX(0);
                 filter: drop-shadow(0 0 0 var(--cyan));
             }
             20% {
                 transform: translateX(-3px);
                 filter: drop-shadow(4px 0 0 var(--cyan)) contrast(1.5);
             }
             40% {
                 transform: translateX(3px);
                 filter: drop-shadow(-4px 0 0 var(--cyan));
                 clip-path: inset(10% 0 10% 0); /* Brief horizontal slice */
             }
             60% {
                 transform: translateX(-1px);
                 filter: drop-shadow(2px 0 0 var(--cyan)) brightness(1.5);
                 clip-path: inset(0 0 0 0); /* Return to full image */
             }
             100% {
                 transform: translateX(0);
                 filter: drop-shadow(0 0 0 var(--cyan));
              }
    </style>