/* -----------------------------
   CYBORG SENTINEL
   Ship Interface
------------------------------*/

/*
body{
    font-family: 'Inter', sans-serif;
}
*/

h1,
h2,
.status,
.directive{
    font-family: 'Orbitron', sans-serif;
}



/* faint starfield */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    /*z-index: 0;*/
	z-index: -1;

    background:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.4) 1px, transparent 2px),
        radial-gradient(circle at 30% 80%, rgba(255,255,255,0.3) 1px, transparent 2px),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,0.25) 1px, transparent 2px),
        radial-gradient(circle at 90% 10%, rgba(255,255,255,0.2) 1px, transparent 2px);

    background-size:
        300px 300px,
        500px 500px,
        700px 700px,
        900px 900px;
    opacity: 0.28;
	filter: blur(0.3px);
}

body{
    margin:0;
    background:#070b12;
    color:#dce8f5;
	font-family:"Segoe UI",sans-serif;
	position: relative;
    z-index: 0;
}

.system-nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:25px;
}

.system-nav a{
    padding:10px 16px;
    border:1px solid rgba(120,180,255,.25);
    border-radius:6px;
    text-decoration:none;
    color:#dbeeff;
    letter-spacing:0.08em;
    text-transform:uppercase;
    font-size:0.85rem;
    transition:0.2s ease;
}

.system-nav a:hover{
    background:rgba(22,48,75,0.7);
    border-color:#70c5ff;
    box-shadow:0 0 10px rgba(80,180,255,.25);
}

.system-nav a.active{
    border-color:#9fe7ff;
    box-shadow:0 0 12px rgba(90,200,255,.35);
    color:#ffffff;
}

/* ----------------------------- */

.ship-interface{

    position:relative;

    padding:80px 20px 100px;

}

.container{

    max-width:1000px;

    margin:auto;

}

/* Panels */

.hero,
.mission,
.overview,
.archive{

    /*background:rgba(18,28,40,.82);*/
	background: rgba(18,28,40,.72);

    border:1px solid rgba(120,180,255,.18);

    border-radius:10px;

    padding:35px;

    margin-bottom:30px;

    box-shadow:
        0 0 20px rgba(60,120,200,.08),
        inset 0 0 0 1px rgba(255,255,255,.02);

}



/* =====================================================
   CYBORG SENTINEL — INDEX PAGE ENHANCEMENTS (ADD-ON)
   ===================================================== */


/* -----------------------------
   HERO CORE EMPHASIS
------------------------------*/

.hero-core{
    margin-top: 10px;
    padding: 10px 0;
}

.hero-core h1{
    margin-bottom: 10px;
}

.hero-core .subtitle{
    opacity: 0.9;
}

.hero-core .system-message{
    margin-top: 15px;
    padding: 10px 14px;
    border-left: 2px solid rgba(135,217,255,.4);
    background: rgba(10, 18, 28, 0.35);
    border-radius: 6px;
}


/* -----------------------------
   ARCHIVE CONTROL GRID
------------------------------*/

.archive-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 20px;
}

/* Make links feel like system nodes */
.archive-grid a{
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: #dbeeff;

    border: 1px solid rgba(120,180,255,.20);
    border-radius: 8px;

    background: rgba(10, 18, 28, 0.45);

    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;

    transition: 0.25s ease;

    position: relative;
    overflow: hidden;
}

/* Hover activation state */
.archive-grid a:hover{
    background: rgba(22, 48, 75, 0.65);
    border-color: #70c5ff;
    box-shadow: 0 0 14px rgba(80,180,255,.25);
    transform: translateY(-2px);
}

/* subtle scan-line / activation feel */
.archive-grid a::before{
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(159,231,255,0.08),
        transparent
    );

    transition: 0.5s;
}

.archive-grid a:hover::before{
    left: 120%;
}


/* -----------------------------
   DIRECTIVE EMPHASIS UPGRADE
------------------------------*/

.directive{
    font-size: 3.4rem;
    font-weight: 800;
    letter-spacing: 0.45em;

    color: #9fe7ff;

    text-align: center;

    margin: 40px 0;

    text-shadow:
        0 0 10px rgba(90,200,255,.35),
        0 0 30px rgba(90,200,255,.18),
        0 0 60px rgba(90,200,255,.08);
}


/* -----------------------------
   HERO VISUAL DEPTH
------------------------------*/

.hero{
    position: relative;
}

/* subtle ambient glow behind hero */
.hero::after{
    content: "";
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;

    background: radial-gradient(
        circle at center,
        rgba(90,180,255,0.08),
        transparent 60%
    );

    z-index: -1;
}


/* -----------------------------
   SECTION CONSISTENCY TWEAK
------------------------------*/

.archive,
.mission,
.overview{
    position: relative;
}

/* subtle internal highlight line */
.archive::before,
.mission::before,
.overview::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 40%;

    background: linear-gradient(
        90deg,
        rgba(135,217,255,.4),
        transparent
    );

    border-radius: 2px;
}


/* -----------------------------
   RESPONSIVE IMPROVEMENTS
------------------------------*/

@media (max-width: 768px){

    .archive-grid{
        grid-template-columns: 1fr;
    }

    .directive{
        font-size: 2.4rem;
        letter-spacing: 0.25em;
    }

}




/* Status */

.status{

    display:inline-block;

    padding:6px 14px;

    margin-bottom:18px;

    font-size:.75rem;

    letter-spacing:.18em;

    color:#87d9ff;

    border:1px solid rgba(135,217,255,.3);

    border-radius:30px;

    text-transform:uppercase;

}

/* Titles */

h1{

    margin:0;

    font-size:4rem;

    letter-spacing:.12em;

    font-weight:300;

    color:white;

}

h2{

    margin-top:0;

    margin-bottom:20px;

    font-size:1.3rem;

    font-weight:500;

    letter-spacing:.15em;

    text-transform:uppercase;

    color:#79c7ff;

}

/* Text */

.subtitle{

    font-size:1.2rem;

    line-height:1.8;

    color:#b9c7d8;

    max-width:700px;

}

p{

    line-height:1.8;

    color:#bcc9d8;

}


/* Directive */

.directive{

    font-size:3rem;

    font-weight:700;

    letter-spacing:.35em;

    color:#9fe7ff;

    text-align:center;

    margin:35px 0;

    text-shadow:

        0 0 8px rgba(90,200,255,.35),

        0 0 22px rgba(90,200,255,.15);

}

/* Navigation */

.archive nav{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;

}

.archive nav a{

    display:inline-block;

    padding:12px 24px;

    text-decoration:none;

    color:#dbeeff;

    border:1px solid rgba(120,180,255,.25);

    border-radius:6px;

    transition:.25s;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.9rem;

}

.archive nav a:hover{

    background:#16304b;

    border-color:#70c5ff;

    box-shadow:0 0 12px rgba(80,180,255,.35);

}

/* subtle panel animation */

.hero,
.mission,
.overview,
.archive{

    transition:.35s;

}

.hero:hover,
.mission:hover,
.overview:hover,
.archive:hover{

    transform:translateY(-2px);

    border-color:rgba(120,190,255,.4);

    box-shadow:

        0 0 30px rgba(90,180,255,.12);

}

/* Music Archive Links */

.archive-link{
    color:inherit;
    transition:.2s;
}

.archive-link:hover{
    background:rgba(0,255,255,.08);
}

.list-group-item{
    border-left:3px solid transparent;
    transition:.2s;
}

.list-group-item:hover{
    border-left:3px solid #00e5ff;
    background:rgba(0,255,255,.10) !important;
} 

.list-group.archive-list{
    background:#11161d !important;
    border:1px solid #2d4456;
    overflow:hidden;
}
/*
.list-group.archive-list > .list-group-item{
    background:#11161d !important;
    color:#d8f7ff !important;
    border-color:#223241 !important;
    font-family:Consolas, monospace;
}*/



.list-group.archive-list > .list-group-item-action:hover{
    background:rgba(0,255,255,.06) !important;
    transform:translateX(3px);
    transition:.2s;
} 




/* =====================================================
   MUSIC ARCHIVE CARDS
===================================================== */

.archive-card{

    background:rgba(18,28,40,.82);

    border:1px solid rgba(120,180,255,.18);

    border-radius:10px;

    padding:35px;

    margin-bottom:40px;

    box-shadow:
        0 0 20px rgba(60,120,200,.08),
        inset 0 0 0 1px rgba(255,255,255,.02);

    transition:.35s;

}

.archive-card:hover{

    transform:translateY(-2px);

    border-color:rgba(120,190,255,.4);

    box-shadow:
        0 0 30px rgba(90,180,255,.12);

}


/* =====================================================
   Archive Header
===================================================== */

.archive-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

    padding-bottom:20px;

    border-bottom:1px solid rgba(120,180,255,.15);

}

.archive-header h2{

    margin:8px 0 10px;

}

.archive-header small{

    color:#79c7ff;

    letter-spacing:.12em;

    text-transform:uppercase;

}


/* =====================================================
   Cover Artwork
===================================================== */

.archive-cover{

    width:100%;

    max-width:320px;

    border-radius:8px;

    border:1px solid rgba(120,180,255,.25);

    box-shadow:
        0 0 18px rgba(0,255,255,.12);

}


/* =====================================================
   Audio Module
===================================================== */

.audio-module audio{

    width:100%;

}

.audio-module .small{

    color:#9cb3c7;

}


/* =====================================================
   Transmission Button
===================================================== */

.btn-outline-info{

    letter-spacing:.08em;

    text-transform:uppercase;

    border-color:#79c7ff;

    color:#79c7ff;

}

.btn-outline-info:hover{

    background:#14344b;

    border-color:#9fe7ff;

    color:#ffffff;

    box-shadow:0 0 12px rgba(0,255,255,.25);

}


/* =====================================================
   Lyrics Panel
===================================================== */

.lyrics-panel{

    margin-top:25px;

    padding:25px;

    background:#0d131b;

    border-left:3px solid #4fdfff;

    border-radius:6px;

    box-shadow:
        inset 0 0 15px rgba(0,255,255,.04);

}

.lyrics-panel h4{

    margin-bottom:20px;

    color:#79c7ff;

    text-transform:uppercase;

    letter-spacing:.1em;

}

.lyrics{

    margin:0;

    white-space:pre-wrap;

    font-family:Consolas, monospace;

    font-size:.92rem;

    line-height:1.7;

    color:#d8e6f2;

}


/* =====================================================
   Responsive
===================================================== */

@media(max-width:700px){

    .archive-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .archive-cover{

        max-width:260px;

        display:block;

        margin:0 auto;

    }

    .archive-card{

        padding:24px;

    }

}









/* Responsive */

@media(max-width:700px){

    h1{

        font-size:2.4rem;

    }

    .directive{

        font-size:2rem;

        letter-spacing:.2em;

    }

    .hero,
    .mission,
    .overview,
    .archive{

        padding:24px;

    }

}