/* ==========================================================================
   MCUniverse - Industrial 90s Aesthetic & Project Sentinel Master Core
   ========================================================================== */

@import url('[fonts.googleapis.com](https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&family=Inter:wght@300;400;500;600&display=swap)');

:root {
    --black-pure: #000000;
    --black-soft: #0a0a0a;
    --gray-dark: #141414;
    --gray-mid: #1e1e1e;
    --gray-light: #2a2a2a;

    --orange-ember: #ff6b35;
    --orange-glow: #ff8c42;
    --cyan-electric: #00fff7;
    --magenta-glitch: #ff00ff;
    --red-warning: #ff2d2d;

    --tier-stone: #444444;
    --tier-iron: #e2e8f0;
    --tier-diamond: #00fff7;
    --tier-netherite-neon: #d946ef;
    --tier-netherite-glow: #ffffff;

    --text-primary: #e0e0e0;
    --text-secondary: #888888;
    --text-muted: #555555;

    --noise-opacity: 0.03;
    --scanline-opacity: 0.05;

    /* Header height token — change once, works everywhere */
    --header-h: 90px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--black-pure);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Cathode Ray Tube Overlays */
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='[w3.org](http://www.w3.org/2000/svg)'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: var(--noise-opacity);
    pointer-events: none;
    z-index: 1000;
}

body::after {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.1) 2px,
        rgba(0,0,0,0.1) 4px
    );
    opacity: var(--scanline-opacity);
    pointer-events: none;
    z-index: 101;
}

/* Grid background */
.glowing-grid {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background-image:
        linear-gradient(rgba(18,18,24,0.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(18,18,24,0.45) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -1;
    pointer-events: none;
}

h1, h2, h3, h4 {
    font-family: 'Orbitron', monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mono { font-family: 'Share Tech Mono', monospace; }

/* ── HEADER ─────────────────────────────────────────────────────────────── */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, var(--black-pure) 60%, transparent 100%);
    padding: 0 2rem;
    /* Soft bottom mask so content fades into it, not abruptly clips */
    -webkit-mask-image: none;
    mask-image: none;
}

.header-inner {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: 0.1em;
    text-shadow: 0 0 20px var(--orange-ember), 0 0 40px rgba(255,107,53,0.3);
    transition: text-shadow 0.3s ease;
}

.logo:hover {
    text-shadow: 0 0 30px var(--orange-ember), 0 0 60px rgba(255,107,53,0.5);
}

.parent-brand {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    margin-top: 0.25rem;
}

.parent-brand .infinity { color: var(--orange-ember); }

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.main-nav a {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0; height: 1px;
    background: var(--orange-ember);
    transition: width 0.3s ease;
}

.main-nav a:hover { color: var(--text-primary); }
.main-nav a:hover::after { width: 100%; }

/* ── SCROLL FADE SYSTEM ─────────────────────────────────────────────────── */
/*
   JS in main.js drives this. We declare the transition here so it's smooth.
   Elements tagged .scroll-fade will transition opacity and a tiny Y shift.
   No initial state set here — JS sets it after first scroll measurement.
*/
.scroll-fade {
    transition: opacity 0.2s ease, transform 0.2s ease;
    will-change: opacity, transform;
}

/* ── PAGE BODY OFFSET ───────────────────────────────────────────────────── */
/*
   Every page that calls header.php gets this offset automatically via
   the <main> tag. No per-page padding-top hacks needed.
*/
main {
    padding-top: calc(var(--header-h) + 48px);
    position: relative;
    z-index: 1;
}

/* ── INDEX PAGE ─────────────────────────────────────────────────────────── */

.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 4rem 2rem;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
}

.directory-layout { display: contents; }
.featured-section { width: 100%; }

.hero-section {
    margin-bottom: 2.5rem;
}

.hero-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--orange-ember) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.25rem;
}

/* Search */
.search-container {
    position: relative;
    max-width: 560px;
    width: 100%;
    margin: 0 0 1.5rem 0;
}

.search-container::before {
    content: "🔍";
    position: absolute;
    left: 15px; top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.5;
    z-index: 2;
    pointer-events: none;
}

.search-input,
input[type="text"].search-input {
    display: block;
    width: 100%;
    background: rgba(20,20,28,0.6);
    border: 1px solid #1f1f2e;
    padding: 12px 16px 12px 45px;
    color: #ffffff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    border-radius: 4px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: var(--cyan-electric);
    box-shadow: 0 0 10px rgba(0,255,255,0.3);
    background: rgba(26,26,36,0.85);
    outline: none;
}

/* Tier legend */
.tier-legend {
    display: flex;
    gap: 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    flex-wrap: wrap;
}

.section-title {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    color: var(--text-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* ── SERVER GRID ────────────────────────────────────────────────────────── */

.servers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    width: 100%;
}

.server-card {
    background: #09090b;
    border: 1px solid #1a1a1e;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    padding: 1.5rem;
    transition:
        transform 0.3s cubic-bezier(0.16,1,0.3,1),
        box-shadow 0.3s cubic-bezier(0.16,1,0.3,1),
        border-color 0.25s ease;
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 2;
}

/* TIER 0 — STONE */
.server-card.tier-stone { border-color: #161619; background: rgba(10,10,12,0.6); }
.server-card.tier-stone:hover {
    transform: translateY(-2px);
    border-color: var(--gray-light);
    box-shadow: 0 8px 20px rgba(0,0,0,0.9);
}

/* TIER 1 — IRON */
.server-card.tier-iron { border-color: rgba(226,232,240,0.15); background: #0d0d11; }
.server-card.tier-iron:hover {
    transform: translateY(-4px);
    border-color: rgba(226,232,240,0.6);
    box-shadow: 0 10px 25px rgba(255,255,255,0.04);
}

/* TIER 2 — DIAMOND */
.server-card.tier-diamond {
    border: 1px solid rgba(0,255,247,0.25);
    background: linear-gradient(135deg, #070e12 0%, #050508 100%);
}
.server-card.tier-diamond .server-name {
    color: var(--cyan-electric);
    text-shadow: 0 0 10px rgba(0,255,247,0.2);
}
.server-card.tier-diamond:hover {
    transform: translateY(-6px);
    border-color: var(--cyan-electric);
    box-shadow: 0 0 25px rgba(0,255,247,0.35), inset 0 0 15px rgba(0,255,247,0.1);
}
.server-card.tier-diamond::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, transparent 95%, rgba(0,255,247,0.08) 100%);
    background-size: 100% 20px;
    animation: matrix-scan 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes matrix-scan {
    0%   { background-position-y: 0px; }
    100% { background-position-y: 200px; }
}

/* TIER 3 — NETHERITE */
.server-card.tier-netherite {
    border: 2px solid rgba(217,70,239,0.4);
    background: linear-gradient(145deg, #120516 0%, #030205 100%);
    animation: netherite-pulse 4s ease-in-out infinite;
}
.server-card.tier-netherite .server-name {
    color: #ffffff;
    text-shadow: 0 0 8px #ffffff, 0 0 15px var(--tier-netherite-neon);
}
.server-card.tier-netherite:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(255,255,255,0.9);
    box-shadow: 0 0 35px rgba(217,70,239,0.5), 0 0 15px rgba(255,255,255,0.3);
}
.server-card.tier-netherite::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.08) 50%, transparent 55%);
    animation: netherite-shimmer 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes netherite-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(217,70,239,0.15); }
    50%       { box-shadow: 0 0 25px rgba(217,70,239,0.3); }
}
@keyframes netherite-shimmer {
    0%   { transform: translate(-50%,-50%) rotate(25deg); }
    100% { transform: translate(50%,50%) rotate(25deg); }
}

/* Card typography */
.server-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.server-meta {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.server-card.tier-stone .server-meta    { color: var(--text-muted); }
.server-card.tier-iron .server-meta     { color: rgba(226,232,240,0.6); }
.server-card.tier-diamond .server-meta  { color: var(--cyan-electric); }
.server-card.tier-netherite .server-meta{ color: #f472b6; font-weight: 700; }

.server-description {
    font-family: 'Inter', sans-serif;
    color: #a1a1aa;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.03);
    z-index: 3;
}

.server-ip {
    font-family: 'Share Tech Mono', monospace;
    background: #050506;
    color: #00fff7;
    padding: 4px 10px;
    border: 1px solid rgba(0,255,247,0.15);
    border-radius: 3px;
    font-size: 0.85rem;
}

.server-status-block {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 2px;
}
.status-badge.online  { background: rgba(0,255,136,0.1); color: #00ff88; }
.status-badge.offline { background: rgba(255,45,45,0.1);  color: var(--red-warning); }

.vote-count {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-view-details, a.btn-view-details {
    display: block;
    width: 100%;
    text-align: center;
    background: #0b0b0d;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.65rem;
    margin-top: 1.25rem;
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    transition: all 0.2s ease;
    z-index: 3;
    position: relative;
}
.btn-view-details:hover {
    background: var(--gray-light);
    color: var(--text-primary) !important;
    border-color: var(--text-secondary);
}
.server-card.tier-diamond .btn-view-details {
    border-color: rgba(0,255,247,0.3);
    background: rgba(0,255,247,0.02);
}
.server-card.tier-diamond .btn-view-details:hover {
    background: rgba(0,255,247,0.1);
    color: var(--cyan-electric) !important;
    border-color: var(--cyan-electric);
}
.server-card.tier-netherite .btn-view-details {
    border-color: rgba(217,70,239,0.3);
    background: rgba(217,70,239,0.02);
}
.server-card.tier-netherite .btn-view-details:hover {
    background: rgba(217,70,239,0.15);
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.8);
}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */

.sidebar {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    height: fit-content;
}

.sidebar-card.widget-rising {
    background: #050507;
    border: 1px solid var(--gray-light);
    border-top: 3px solid var(--orange-ember);
    padding: 1.25rem;
    border-radius: 4px;
}

.widget-title {
    font-family: 'Orbitron', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--orange-ember);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--gray-light);
}

.rising-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.rising-list li {
    display: grid;
    grid-template-columns: 42px 10px 1fr 10px 55px 10px 25px;
    align-items: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    background: #0b0b0e;
}

.rising-list li .telemetry-divider { color: var(--text-muted); opacity: 0.25; text-align: center; user-select: none; }
.rising-list li .name-span  { color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rising-list li .vote-span  { color: var(--text-primary); text-align: right; font-weight: bold; font-size: 0.85rem; }

.row-tier-1 { border-color: rgba(217,70,239,0.4) !important; background: rgba(217,70,239,0.03) !important; }
.row-tier-1 .rank-num { color: #f472b6 !important; text-shadow: 0 0 8px rgba(217,70,239,0.6); }
.row-tier-2 { border-color: rgba(0,255,247,0.4) !important; background: rgba(0,255,247,0.03) !important; }
.row-tier-2 .rank-num { color: var(--cyan-electric) !important; text-shadow: 0 0 6px rgba(0,255,247,0.4); }
.row-tier-3 { border-color: rgba(255,107,53,0.4) !important; background: rgba(255,107,53,0.03) !important; }
.row-tier-3 .rank-num { color: var(--orange-glow) !important; text-shadow: 0 0 6px rgba(255,107,53,0.4); }
.row-tier-4-5  { border-color: var(--gray-light) !important; background: #0f0f13 !important; }
.row-tier-6-plus { border-color: #1a1a22 !important; background: #070709 !important; opacity: 0.85; }
.row-tier-6-plus .rank-num { color: var(--text-muted) !important; }

.led-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; height: 100%;
}

.status-led {
    width: 7px; height: 7px;
    border-radius: 50%;
    display: block;
}
.status-led.online {
    background-color: var(--cyan-electric) !important;
    box-shadow: 0 0 10px rgba(0,255,247,1), 0 0 20px rgba(0,255,247,0.6) !important;
}
.status-led.offline {
    background-color: var(--red-warning) !important;
    box-shadow: 0 0 8px var(--red-warning) !important;
}
.status-led.netherite-active {
    background-color: #f472b6 !important;
    box-shadow: 0 0 12px #f472b6, 0 0 24px var(--tier-netherite-neon) !important;
}

/* ── PREMIUM PAGE ────────────────────────────────────────────────────────── */

.premium-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px 20px;
    /* top padding is handled by main { padding-top } — no override needed */
}

.premium-page-header {
    text-align: center;
    margin-bottom: 48px;
    /* Extra top breathing room so the heading clears the header gradient cleanly */
    padding-top: 32px;
}

.premium-page-header h1 {
    font-size: 2rem;
    color: #fff;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.premium-page-header p {
    color: var(--text-secondary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    margin: 0;
    letter-spacing: 1px;
}

.premium-page-header .accent-rule {
    width: 60px;
    height: 2px;
    background: var(--orange-ember);
    margin: 20px auto 0 auto;
    box-shadow: 0 0 8px var(--orange-ember);
}

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 0;
}

.premium-card {
    background: rgba(9,9,11,0.7);
    border: 1px solid #1a1a1e;
    border-radius: 6px;
    padding: 25px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    min-height: 380px;
}

.tier-stone { border-color: #161619 !important; }
.tier-stone:hover {
    transform: translateY(-3px);
    border-color: var(--gray-light) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.9) !important;
}
.tier-stone .card-caption { color: #8a8a9e; }

.tier-iron { border-color: rgba(226,232,240,0.15) !important; }
.tier-iron:hover {
    transform: translateY(-5px);
    border-color: rgba(226,232,240,0.6) !important;
    box-shadow: 0 10px 25px rgba(255,255,255,0.04) !important;
}
.tier-iron .card-caption { color: #e2e2e5; }

.tier-diamond { border-color: rgba(0,255,247,0.25) !important; }
.tier-diamond:hover {
    transform: translateY(-6px);
    border-color: var(--cyan-electric) !important;
    box-shadow: 0 0 25px rgba(0,255,247,0.35), inset 0 0 15px rgba(0,255,247,0.1) !important;
}
.tier-diamond .card-caption { color: var(--cyan-electric); text-shadow: 0 0 10px rgba(0,255,247,0.3); }
.tier-diamond::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, transparent 95%, rgba(0,255,247,0.06) 100%);
    background-size: 100% 20px;
    animation: premium-matrix-scan 6s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.tier-netherite { border-color: rgba(217,70,239,0.4) !important; }
.tier-netherite:hover {
    transform: translateY(-8px) scale(1.01);
    border-color: rgba(255,255,255,0.9) !important;
    box-shadow: 0 0 35px rgba(217,70,239,0.5), 0 0 15px rgba(255,255,255,0.3) !important;
}
.tier-netherite .card-caption { color: #ffffff; text-shadow: 0 0 8px #ffffff, 0 0 15px var(--tier-netherite-neon); }
.tier-netherite::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: linear-gradient(45deg, transparent 45%, rgba(255,255,255,0.08) 50%, transparent 55%);
    transform: rotate(45deg);
    animation: premium-shimmer 4.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes premium-matrix-scan {
    0%   { background-position-y: 0px; }
    100% { background-position-y: 200px; }
}
@keyframes premium-shimmer {
    0%   { transform: translate(-50%,-50%) rotate(25deg); }
    100% { transform: translate(50%,50%) rotate(25deg); }
}

.card-caption {
    font-family: 'Orbitron', monospace;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-vector {
    font-family: 'Orbitron', monospace;
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 20px;
}
.price-vector span {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.feature-manifest {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    font-size: 0.85rem;
    color: #a1a1aa;
    line-height: 1.8;
}
.feature-manifest li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
}
.feature-manifest li::before {
    content: ">";
    position: absolute;
    left: 0;
    color: var(--orange-ember);
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
}

.action-trigger {
    display: block;
    width: 100%;
    text-align: center;
    background: #0b0b0d;
    color: var(--text-secondary) !important;
    padding: 10px;
    text-decoration: none;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--gray-light);
    border-radius: 3px;
    transition: all 0.2s ease;
    position: relative;
    z-index: 3;
}
.action-trigger:hover:not(.disabled) {
    background: var(--gray-light);
    color: var(--text-primary) !important;
    border-color: var(--text-secondary);
}
.tier-diamond .action-trigger { border-color: rgba(0,255,247,0.3); background: rgba(0,255,247,0.02); }
.tier-diamond .action-trigger:hover { background: rgba(0,255,247,0.1); color: var(--cyan-electric) !important; border-color: var(--cyan-electric); }
.tier-netherite .action-trigger { border-color: rgba(217,70,239,0.3); background: rgba(217,70,239,0.02); }
.tier-netherite .action-trigger:hover { background: rgba(217,70,239,0.15); color: #ffffff !important; border-color: rgba(255,255,255,0.8); }
.action-trigger.disabled {
    border-color: #161619 !important;
    background: rgba(10,10,12,0.4) !important;
    color: var(--text-muted) !important;
    cursor: default;
}

/* Progression panel */
.progression-hub-panel {
    background: #050507;
    border: 1px solid var(--gray-light);
    border-top;
}

/* ==========================================================================
   MODAL — hidden until JS adds .active
   ========================================================================== */

#auth-modal {
    display: none;          /* JS switches this to flex */
    position: fixed;
    inset: 0;
    z-index: 800;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
}

#auth-modal.active {
    display: flex;
}

.auth-modal-inner {
    background: #09090b;
    border: 1px solid var(--gray-light);
    border-top: 3px solid var(--orange-ember);
    width: 100%;
    max-width: 460px;
    padding: 2.5rem;
    position: relative;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.15),
                0 0 120px rgba(0, 0, 0, 0.8);
    animation: modal-drop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-drop {
    from { opacity: 0; transform: translateY(-16px); }
    to   { opacity: 1; transform: translateY(0); }
}

#auth-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Share Tech Mono', monospace;
}
#auth-modal-close:hover { color: var(--text-primary); }

.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-light);
    margin-bottom: 2rem;
}

.auth-tab-btn {
    flex: 1;
    padding: 0.75rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: -1px;
}
.auth-tab-btn.active {
    color: var(--orange-ember);
    border-bottom-color: var(--orange-ember);
}
.auth-tab-btn:hover { color: var(--text-primary); }

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-field {
    margin-bottom: 1.25rem;
}
.auth-field label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    color: var(--orange-ember);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.4rem;
}
.auth-field input {
    width: 100%;
    background: #050507;
    border: 1px solid var(--gray-light);
    color: var(--text-primary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
    border-radius: 3px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}
.auth-field input:focus {
    border-color: var(--orange-ember);
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.18);
}
.auth-field input::placeholder { color: var(--text-muted); }

.pw-strength-wrapper {
    height: 3px;
    background: var(--gray-light);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}
#pw-strength-bar {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
}
#pw-strength-label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.auth-submit-btn {
    width: 100%;
    padding: 0.85rem;
    background: transparent;
    border: 1px solid var(--orange-ember);
    color: var(--orange-ember);
    font-family: 'Orbitron', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.25s ease;
    margin-top: 0.5rem;
}
.auth-submit-btn:hover {
    background: var(--orange-ember);
    color: var(--black-pure);
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.35);
}

.auth-error {
    background: rgba(255, 45, 45, 0.07);
    border: 1px solid rgba(255, 45, 45, 0.35);
    color: var(--red-warning);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    padding: 0.75rem 1rem;
    border-radius: 3px;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.auth-switch-link {
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 1rem;
}
.auth-switch-link a {
    color: var(--orange-ember);
    text-decoration: none;
    cursor: pointer;
}
.auth-switch-link a:hover { text-decoration: underline; }

/* Nav auth buttons */
.nav-auth-btn {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 0.4rem 0.85rem !important;
    border: 1px solid var(--gray-light) !important;
    border-radius: 3px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.nav-auth-btn:hover {
    border-color: var(--orange-ember) !important;
    color: var(--orange-ember) !important;
}
.nav-register {
    border-color: rgba(255, 107, 53, 0.35) !important;
    color: var(--orange-ember) !important;
}
.nav-register:hover {
    background: rgba(255, 107, 53, 0.08) !important;
}
.nav-active {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--orange-ember) !important;
}

/* Flash messages */
.flash-message {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 700;
    padding: 0.85rem 1.5rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    border-radius: 3px;
    border-left: 3px solid var(--orange-ember);
    background: #09090b;
    color: var(--text-primary);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    max-width: 380px;
    line-height: 1.5;
}
.flash-message.success { border-left-color: #00ff88; }
.flash-message.error   { border-left-color: var(--red-warning); }

/* ==========================================================================
   SEARCH BAR — restored terminal aesthetic
   ========================================================================== */

.search-container {
    position: relative;
    max-width: 680px;
    width: 100%;
    margin: 0 0 2rem 0;
}

.search-container::before {
    content: "//";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
    color: var(--orange-ember);
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
    letter-spacing: -2px;
}

.search-input,
input[type="text"].search-input {
    display: block;
    width: 100%;
    background: rgba(9, 9, 11, 0.85) !important;
    border: 1px solid var(--gray-light) !important;
    border-left: 3px solid var(--orange-ember) !important;
    padding: 14px 20px 14px 52px !important;
    color: var(--text-primary) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.95rem !important;
    border-radius: 3px !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.search-input::placeholder { color: var(--text-muted) !important; }

.search-input:focus {
    border-color: var(--gray-light) !important;
    border-left-color: var(--cyan-electric) !important;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 255, 247, 0.12) !important;
    background: rgba(7, 14, 18, 0.95) !important;
}

/* Scan line sweep on focus */
.search-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 247, 0.04) 50%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    border-radius: 3px;
    transition: opacity 0.3s ease;
}
.search-container:focus-within::after {
    opacity: 1;
    animation: search-sweep 2s linear infinite;
}

@keyframes search-sweep {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* ==========================================================================
   AI TERMINAL — floating panel styles
   ========================================================================== */

#ai-terminal-trigger {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 600;
    background: #09090b;
    border: 1px solid var(--orange-ember);
    color: var(--orange-ember);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.15);
    user-select: none;
}
#ai-terminal-trigger:hover {
    background: rgba(255, 107, 53, 0.08);
    box-shadow: 0 0 25px rgba(255, 107, 53, 0.3);
}

#ai-terminal-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 760px;
    height: 420px;
    background: #050507;
    border: 1px solid var(--gray-light);
    border-top: 2px solid var(--orange-ember);
    border-bottom: none;
    z-index: 600;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);
}

#ai-terminal-panel.open {
    transform: translateY(0);
}

.ai-terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--gray-light);
    background: #07070a;
    flex-shrink: 0;
}

#close-ai-terminal {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Share Tech Mono', monospace;
}
#close-ai-terminal:hover { color: var(--text-primary); }

.ai-console-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-secondary);
    scrollbar-width: thin;
    scrollbar-color: var(--gray-light) transparent;
}

.ai-console-body .terminal-line { margin-bottom: 0.25rem; }
.ai-console-body .line-user     { color: var(--cyan-electric); }
.ai-console-body .line-sys      { color: var(--text-muted); }
.ai-console-body .line-response { color: var(--text-primary); white-space: pre-wrap; }
.ai-console-body .line-error    { color: var(--red-warning); }
.ai-console-body .line-sysloading { color: var(--orange-ember); }

.ai-terminal-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--gray-light);
    background: #07070a;
    flex-shrink: 0;
}

.ai-query-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.88rem;
    outline: none;
    letter-spacing: 0.05em;
}
.ai-query-input::placeholder { color: var(--text-muted); }

/* ==========================================================================
   ACHIEVEMENT HUD OVERLAY
   ========================================================================== */

.achievement-hud {
    position: fixed;
    inset: 0;
    z-index: 750;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
}
.achievement-hud.active { display: flex; }

.achievement-inner {
    background: #09090b;
    border: 1px solid var(--orange-ember);
    border-top: 3px solid var(--orange-ember);
    padding: 2.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.2);
    animation: modal-drop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.achievement-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: var(--orange-ember);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.achievement-title {
    font-family: 'Orbitron', monospace;
    font-size: 1.4rem;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px var(--orange-ember);
}
.achievement-body {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   INFINITY SYMBOL — larger than surrounding text
   ========================================================================== */
.parent-brand {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.parent-brand .infinity {
    color: var(--orange-ember);
    font-size: 1.6rem;        /* Noticeably larger than 0.7rem surrounding text */
    line-height: 0.8;
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    text-shadow:
        0 0 8px var(--orange-ember),
        0 0 20px rgba(255, 107, 53, 0.5);
    position: relative;
    top: 1px;                 /* Optical alignment with smaller text */
}

/* ==========================================================================
   SEARCH BAR — full terminal treatment restored
   ========================================================================== */
.hero-section .search-container,
.search-container {
    position: relative !important;
    max-width: 680px !important;
    width: 100% !important;
    margin: 1.5rem 0 2rem 0 !important;
}

/* The // prefix inside the bar */
.search-container::before {
    content: "//" !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 1rem !important;
    color: var(--orange-ember) !important;
    opacity: 0.8 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    letter-spacing: -3px !important;
    line-height: 1 !important;
}

.search-container input,
.search-container .search-input,
input.search-input {
    display: block !important;
    width: 100% !important;
    height: 56px !important;
    background: rgba(9, 9, 11, 0.9) !important;
    border: 1px solid var(--gray-light) !important;
    border-left: 3px solid var(--orange-ember) !important;
    padding: 0 24px 0 56px !important;
    color: var(--text-primary) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 1rem !important;
    border-radius: 3px !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6) !important;
    box-sizing: border-box !important;
}

.search-container input::placeholder,
input.search-input::placeholder {
    color: var(--text-muted) !important;
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: 1px !important;
}

.search-container input:focus,
input.search-input:focus {
    border-color: var(--gray-light) !important;
    border-left-color: var(--cyan-electric) !important;
    background: rgba(7, 14, 18, 0.95) !important;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(0, 255, 247, 0.15) !important;
}

/* Animated scan line on focus */
.search-container::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 40px !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 255, 247, 0.06),
        transparent
    ) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border-radius: 3px !important;
    transition: opacity 0.3s ease !important;
}

.search-container:focus-within::after {
    opacity: 1 !important;
    animation: search-scan 2.5s linear infinite !important;
}

@keyframes search-scan {
    0%   { transform: translateX(-40px); }
    100% { transform: translateX(720px); }
}

/* ==========================================================================
   NETHERITE TIER LABEL — purple glow visible against purple card bg
   ========================================================================== */

/* Tier legend on index page */
.tier-legend span:last-child,
.tier-legend .netherite-legend {
    color: #e879f9 !important;
    text-shadow:
        0 0 6px #e879f9,
        0 0 14px rgba(232, 121, 249, 0.7),
        0 0 28px rgba(217, 70, 239, 0.4) !important;
}

/* The colored square dot next to NETHERITE in the legend */
.tier-legend span:last-child span,
.tier-legend .netherite-legend span {
    background: #e879f9 !important;
    border-color: #e879f9 !important;
    box-shadow:
        0 0 6px #e879f9,
        0 0 14px rgba(232, 121, 249, 0.8) !important;
}

/* Server card tier-netherite meta label (• NETHERITE TARGET) */
.server-card.tier-netherite .server-meta {
    color: #e879f9 !important;
    font-weight: 700 !important;
    text-shadow:
        0 0 8px #e879f9,
        0 0 18px rgba(232, 121, 249, 0.6),
        0 0 35px rgba(217, 70, 239, 0.35) !important;
    letter-spacing: 1px !important;
}

/* The bullet dot before the meta text */
.server-card.tier-netherite .server-meta::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e879f9;
    margin-right: 7px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    box-shadow:
        0 0 6px #e879f9,
        0 0 14px rgba(232, 121, 249, 0.9),
        0 0 28px rgba(217, 70, 239, 0.5);
    animation: netherite-dot-pulse 2s ease-in-out infinite;
}

@keyframes netherite-dot-pulse {
    0%, 100% {
        box-shadow:
            0 0 6px #e879f9,
            0 0 14px rgba(232, 121, 249, 0.9),
            0 0 28px rgba(217, 70, 239, 0.5);
    }
    50% {
        box-shadow:
            0 0 10px #e879f9,
            0 0 22px rgba(232, 121, 249, 1),
            0 0 40px rgba(217, 70, 239, 0.7);
    }
}

/* ==========================================================================
   AI CODER TRIGGER — moved to right, friendlier label
   ========================================================================== */
#ai-terminal-trigger {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;     /* RIGHT side */
    left: auto !important;      /* Override any left:2rem */
    z-index: 600 !important;
    background: #09090b !important;
    border: 1px solid var(--orange-ember) !important;
    color: var(--orange-ember) !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.8rem !important;
    padding: 0.65rem 1.1rem !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 0 18px rgba(255, 107, 53, 0.2) !important;
    user-select: none !important;
    text-align: center !important;
    line-height: 1.3 !important;
    min-width: 140px !important;
}

#ai-terminal-trigger:hover {
    background: rgba(255, 107, 53, 0.1) !important;
    box-shadow: 0 0 30px rgba(255, 107, 53, 0.4) !important;
    transform: translateY(-2px) !important;
}

#ai-terminal-trigger .trigger-title {
    display: block;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#ai-terminal-trigger .trigger-sub {
    display: block;
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   FOOTER — fully restored
   ========================================================================== */
.site-footer {
    background: var(--gray-dark) !important;
    border-top: 1px solid var(--gray-light) !important;
    padding: 2.5rem 2rem !important;
    margin-top: 4rem !important;
    position: relative !important;
    z-index: 10 !important;
}

.footer-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
}

.footer-brand {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.85rem !important;
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
}

.footer-brand a {
    color: var(--orange-ember) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.footer-brand a:hover {
    color: var(--orange-glow) !important;
    text-shadow: 0 0 8px var(--orange-ember) !important;
}

.footer-nav {
    display: flex !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
}

.footer-nav a {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.8rem !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
}

.footer-nav a:hover {
    color: var(--cyan-electric) !important;
    text-shadow: 0 0 8px var(--cyan-electric) !important;
}