/* --- Core Reset & Font Architecture --- */
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    text-decoration: none !important; /* Kills all default link underlines entirely */
}
a {
  text-decoration: none;
  }
body, html {
    width: 100%; 
    height: 100%;
    background-color: #000000;
    color: #ffffff;
    font-family: 'Courier New', Courier, monospace; 
    overflow: hidden;
}

/* --- FIXED PIXEL RADAR BACKGROUND LAYER --- */
.router-bg {
    position: fixed !important;
    top: 0 !important; 
    left: 0 !important; 
    width: 100vw !important; 
    height: 100vh !important;
    background: url('https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmRwa3gwN2RlZ3g5bjE3bjJidHFlaDdvcnZodDBmMGQ2YXVnYzlkcyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/8hZpqFR4XbM7jt8dh8/giphy.gif') no-repeat center center fixed !important;
    background-size: cover !important;
    z-index: 1; /* Pushed above the solid black canvas floor */
    opacity: 0.5; /* Kept extremely dim for a clean minimalist style texture */
    filter: contrast(1.5) brightness(0.7);
    pointer-events: none;
}

.router-wrapper {
    max-width: 1200px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    position: relative;
    z-index: 5; /* Forces content cards to stay on top of the background GIF */
}

/* --- Split Layout Grid --- */
.split-channels {
    display: flex;
    width: 100%;
    gap: 40px;
}

/* --- CENTERED MINIMAL CARD CONTAINER --- */
.router-card {
    flex: 1;
    background: rgba(3, 3, 3, 0.6);
    border: 1px solid #111111;
    height: 280px; 
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers text elements vertically */
    align-items: center;     /* Centers text elements horizontally */
    position: relative;
    overflow: hidden;
    gap: 14px;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.protocol-code {
    font-size: 11px;
    font-weight: bold;
    color: #333333;
    letter-spacing: 2px;
    transition: color 0.2s;
}

.channel-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #ffffff;
    text-align: center;
    border-bottom: none !important; /* Erases any border remnants */
    transition: all 0.2s steps(4);
}

/* Base Edge Progress Bars */
.glow-bar {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%; height: 2px;
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/* --- HOVER INTERACTION OVERLAY LOGIC --- */

/* Recruiters Target */
.channel-left:hover {
    border-color: #a3ff00;
    box-shadow: 0 20px 40px rgba(163, 255, 0, 0.03);
}
.channel-left:hover .channel-title { color: #a3ff00; text-shadow: 0 0 12px rgba(163, 255, 0, 0.4); }
.channel-left:hover .protocol-code { color: rgba(163, 255, 0, 0.4); }
.channel-left .glow-bar { background: #a3ff00; box-shadow: 0 0 8px #a3ff00; }
.channel-left:hover .glow-bar { transform: scaleX(1); }

/* Lair Target */
.channel-right:hover {
    border-color: #ff00ff;
    box-shadow: 0 20px 40px rgba(255, 0, 255, 0.03);
}
.channel-right:hover .channel-title { color: #ff00ff; text-shadow: 0 0 12px rgba(255, 0, 255, 0.4); }
.channel-right:hover .protocol-code { color: rgba(255, 0, 255, 0.4); }
.channel-right .glow-bar { background: #ff00ff; box-shadow: 0 0 8px #ff00ff; }
.channel-right:hover .glow-bar { transform: scaleX(1); }