/*
 * extra.css — KAYLA'S HANGOUT TRANS HACKER THEME
 * Replaces the original extra.css entirely
 */

@import url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=VT323&display=swap);

/* ── TRANS FLAG STRIPE (injected via #header::before via global) ── */

/* ── LOGO TEXT ── */
.logotext {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: 38px !important;
    color: #5bcffa !important;
    text-shadow: 0 0 20px rgba(91,207,250,0.7), 0 0 60px rgba(91,207,250,0.25) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-decoration: none !important;
    animation: logoFlicker 7s infinite;
}
@keyframes logoFlicker {
    0%,93%,100%{opacity:1;} 94%{opacity:.75;} 95%{opacity:1;} 97%{opacity:.5;} 98%{opacity:1;}
}
.logotextc {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 900 !important;
    font-size: 38px !important;
    color: #f5a9b8 !important;
    text-shadow: 0 0 20px rgba(245,169,184,0.7), 0 0 60px rgba(245,169,184,0.25) !important;
    letter-spacing: 0.06em !important;
    line-height: 1.1 !important;
    margin: 0 !important;
}
.logotext a, .logotextc a,
.logotext a:link, .logotextc a:link,
.logotext a:visited, .logotextc a:visited,
.logotext a:hover, .logotextc a:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* ── MAIN MENU (#menu — uses float:left li) ── */
#menu {
    margin: 0 !important;
    padding: 0 !important;
    background: #03070f !important;
    border-bottom: 1px solid rgba(91,207,250,0.2) !important;
    height: auto !important;
    overflow: hidden !important;
    display: block !important;
}

#menu li {
    float: left !important;
    display: block !important;
    position: relative !important;
    z-index: 500 !important;
    line-height: normal !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

#menu li a {
    display: block !important;
    padding: 10px 16px !important;
    height: auto !important;
    line-height: 1 !important;
    font-size: 11px !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-weight: normal !important;
    text-decoration: none !important;
    color: #4d8aaa !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    position: static !important;
    left: auto !important;
    text-align: left !important;
    border-right: 1px solid rgba(91,207,250,0.1) !important;
    text-shadow: none !important;
    background: transparent !important;
    transition: color 0.15s, background 0.15s, text-shadow 0.15s !important;
}

#menu li a:hover {
    background: rgba(91,207,250,0.07) !important;
    color: #5bcffa !important;
    text-shadow: 0 0 10px rgba(91,207,250,0.5) !important;
}

/* Hide the sub-menu shadow div */
.menu-shadow { display: none !important; }

/* ── STATS ROUND (used in header area) ── */
.statround {
    background: rgba(245,169,184,0.15) !important;
    border: 1px solid rgba(245,169,184,0.3) !important;
    color: #f5a9b8 !important;
    padding: 3px 10px !important;
    margin-left: 10px !important;
    font-size: 11px !important;
}
.statround a:link, .statround a:visited { color: #f5a9b8 !important; }
.statround a:hover { color: #ffffff !important; }

/* ── TABS ── */
ul.tabs {
    border-bottom: 1px solid rgba(91,207,250,0.2) !important;
    border-left: 1px solid rgba(91,207,250,0.1) !important;
    background: transparent !important;
    height: auto !important;
}
ul.tabs li {
    background: #060d1a !important;
    border: 1px solid rgba(91,207,250,0.15) !important;
    border-left: none !important;
    height: auto !important;
    line-height: normal !important;
}
ul.tabs li a {
    color: #4d8aaa !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    padding: 6px 16px !important;
}
ul.tabs li a:hover { background: rgba(91,207,250,0.06) !important; color: #5bcffa !important; }
html ul.tabs li.active,
html ul.tabs li.active a:hover {
    background: rgba(91,207,250,0.1) !important;
    border-bottom: 1px solid #5bcffa !important;
}

/* ── BACK TO TOP ── */
#backtop {
    background-color: rgba(91,207,250,0.1) !important;
    border: 1px solid rgba(91,207,250,0.3) !important;
    color: #5bcffa !important;
    background-image: none !important;
}
#backtop a { color: #5bcffa !important; }

/* ── THEAD DESCRIPTION TOOLTIP ── */
.thead .description {
    background: #060d1a !important;
    color: #cce8f5 !important;
    border: 1px solid rgba(91,207,250,0.2) !important;
    border-radius: 0 !important;
}

/* ── COPYRIGHT ── */
#copyright { float: right; }