/**
 * RUST Server Page - Gritty Industrial Design
 */

:root {
    --rust-orange: #ce422b;
    --rust-brown: #8b4513;
    --rust-dark: #1a1310;
    --rust-metal: #2c2420;
    --rust-glow: #ff6b35;
}

/* Fullscreen Hero */
.rust-hero-fullscreen {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0806 0%, #1a0f0a 100%);
}

.hero-background-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 0;
}

/* A <video> element, not the old YouTube iframe. object-fit does the
   letterbox-free fill that the iframe needed the 16:9 min-width/min-height
   trick for, so the sizing is simply 100% of the fixed parent. */
.hero-background-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Raised from 0.25: the sections above no longer paint their own dark
       backgrounds, so the video is the page's backdrop rather than something
       glimpsed behind slabs. */
    opacity: 0.45;
}

/* One continuous veil across the whole page, sitting on the same fixed layer
   as the video. Replaces the per-section backgrounds that made the page read
   as a stack of bands: because it never scrolls, there is no boundary anywhere
   for a seam to appear at. */
.hero-background-video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(8, 6, 5, 0.62);
    pointer-events: none;
}

.rust-texture-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0,0,0,.1) 2px,
            rgba(0,0,0,.1) 4px
        );
    opacity: 0.3;
    animation: scanlines 8s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes scanlines {
    0% { transform: translateY(0); }
    100% { transform: translateY(100px); }
}

.hero-content-center {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 2rem;
    max-width: 1200px;
}

/* Server Badge */
.server-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(206, 66, 43, 0.2);
    border: 2px solid var(--rust-orange);
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 2px;
    color: var(--rust-glow);
    margin-bottom: 2rem;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(206, 66, 43, 0.3);
}

.badge-icon {
    font-size: 1.25rem;
    animation: pulse 2s ease-in-out infinite;
}

/* Title */
.rust-title {
    font-size: clamp(4rem, 12vw, 8rem);
    font-weight: 900;
    line-height: 0.9;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: -2px;
}

.title-line {
    display: block;
    color: #fff;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 107, 53, 0.3),
        3px 3px 0 rgba(0, 0, 0, 0.8);
}

.title-line.glow {
    background: linear-gradient(135deg, var(--rust-orange) 0%, var(--rust-glow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 30px rgba(206, 66, 43, 0.8),
        0 0 60px rgba(206, 66, 43, 0.4);
    animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
    0%, 100% {
        filter: brightness(1);
        text-shadow: 0 0 30px rgba(206, 66, 43, 0.8);
    }
    50% {
        filter: brightness(1.2);
        text-shadow: 0 0 50px rgba(206, 66, 43, 1);
    }
}

.rust-tagline {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 3rem;
    font-weight: 300;
}

/* Live Stats Bar */
.live-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: rgba(20, 15, 10, 0.9);
    border: 2px solid rgba(206, 66, 43, 0.3);
    border-radius: 8px;
    padding: 2rem;
    margin: 3rem auto;
    max-width: 900px;
    flex-wrap: wrap;
    backdrop-filter: blur(10px);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(206, 66, 43, 0.1);
    border: 2px solid var(--rust-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.stat-icon-circle svg {
    color: var(--rust-glow);
}

.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--rust-orange);
    border-radius: 50%;
    animation: pulseRing 2s ease-out infinite;
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4caf50;
    box-shadow: 0 0 10px #4caf50;
}

.status-dot.offline {
    background: #f44336;
    box-shadow: 0 0 10px #f44336;
}

.stat-text {
    text-align: left;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Courier New', monospace;
}

.stat-divider {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--rust-orange), transparent);
}

/* Connect Button */
.btn-rust-connect {
    background: linear-gradient(135deg, var(--rust-orange) 0%, #a83226 100%);
    border: none;
    padding: 1.5rem 3rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 10px 30px rgba(206, 66, 43, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-rust-connect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-rust-connect:hover::before {
    left: 100%;
}

.btn-rust-connect:hover {
    transform: translateY(-2px);
    box-shadow:
        0 15px 40px rgba(206, 66, 43, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-rust-connect:active {
    transform: translateY(0);
}

.btn-text {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.25rem;
}

.btn-subtext {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Courier New', monospace;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 20;
}

.scroll-indicator span {
    opacity: 0.8;
}

.mouse-icon {
    width: 30px;
    height: 50px;
    border: 2px solid var(--rust-orange);
    border-radius: 15px;
    position: relative;
    box-shadow: 0 0 10px rgba(206, 66, 43, 0.3);
}

.mouse-wheel {
    width: 4px;
    height: 10px;
    background: var(--rust-orange);
    border-radius: 2px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    animation: mouseScroll 2s ease-in-out infinite;
    box-shadow: 0 0 5px rgba(206, 66, 43, 0.5);
}

@keyframes mouseScroll {
    0%, 100% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, 15px);
    }
}

/* Rust Sections */
.rust-section {
    padding: 6rem 0;
    position: relative;
}

/* Was a gradient whose second stop read "#12 0d0a" — a stray space made it two
   invalid tokens, so the declaration was dropped entirely. Now transparent by
   design: the page-wide veil handles darkening. */
.server-info-section {
    background: transparent;
}

/* Info Split Layout */
.info-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.settings-panel,
.wipe-panel {
    background: rgba(20, 15, 10, 0.8);
    border: 2px solid rgba(206, 66, 43, 0.3);
    border-radius: 4px;
    padding: 2rem;
    backdrop-filter: blur(10px);
}

.wipe-panel {
    background-image: url('/images/map.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.wipe-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 15, 10, 0.85);
    z-index: 0;
}

.wipe-panel > * {
    position: relative;
    z-index: 1;
}

.panel-header {
    margin-bottom: 2rem;
}

.panel-header h2 {
    font-size: 1.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 0.5rem;
    font-weight: 900;
}

.header-line {
    height: 3px;
    width: 60px;
    background: linear-gradient(90deg, var(--rust-orange), transparent);
}

/* Settings List */
/* The SERVER CONFIG card these styled was removed — its values were hardcoded
   in the markup rather than read from the server, so it could drift out of
   date silently. .settings-panel is kept above only because .wipe-panel shares
   its card styling. */

/* Countdown Display */
.countdown-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.countdown-segment {
    text-align: center;
}

.countdown-number {
    font-size: 3.5rem;
    font-weight: 900;
    font-family: 'Courier New', monospace;
    color: var(--rust-glow);
    text-shadow: 0 0 20px rgba(206, 66, 43, 0.6);
    line-height: 1;
}

.countdown-unit {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0.5rem;
}

.countdown-separator {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 700;
}

/* Terminal Window */
.terminal-window {
    background: rgba(10, 8, 6, 0.4);
    border: 2px solid rgba(206, 66, 43, 0.3);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.terminal-header {
    background: rgba(20, 15, 10, 0.5);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(206, 66, 43, 0.3);
}

.terminal-buttons {
    display: flex;
    gap: 0.5rem;
}

.terminal-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.terminal-btn.red { background: #ff5f56; }
.terminal-btn.yellow { background: #ffbd2e; }
.terminal-btn.green { background: #27c93f; }

.terminal-title {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
}

.terminal-body {
    padding: 2rem;
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
}

.terminal-line {
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
}

.terminal-prompt {
    color: #4caf50;
    font-weight: 700;
}

.terminal-command {
    color: var(--rust-glow);
    margin-left: 0.5rem;
}

.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--rust-glow);
    animation: blink 1s step-start infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.rules-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
}

/* Sits above the numbered list — the fair play note and the line saying that
   entering the server means agreeing to the rules. */
.rules-intro {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
    margin: 0 auto 1rem;   /* auto centres the block within the card */
    max-width: 90ch;
    text-align: center;
}

.rules-intro:last-of-type {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(206, 66, 43, 0.25);
}

.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.rule-number {
    color: var(--rust-orange);
    font-weight: 700;
    flex-shrink: 0;
}

.rule-title {
    color: #fff;
    font-weight: 700;
    margin-right: 0.5rem;
}

.rule-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Mods Section */
.mods-section {
    background: transparent;
}

.section-title-center {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title-center h2 {
    font-size: 2.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0 0 0.5rem;
    font-weight: 900;
}

.section-title-center p {
    color: rgba(255, 255, 255, 0.6);
}

.mods-grid-rust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.mod-card-rust {
    background: rgba(20, 15, 10, 0.8);
    border: 2px solid rgba(206, 66, 43, 0.2);
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mod-card-rust:hover {
    transform: translateY(-5px);
    border-color: var(--rust-orange);
    box-shadow: 0 10px 30px rgba(206, 66, 43, 0.3);
}

.mod-icon-rust {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: grayscale(0.3);
    transition: filter 0.3s ease;
}

.mod-card-rust:hover .mod-icon-rust {
    filter: grayscale(0);
}

.mod-card-rust h3 {
    color: #fff;
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mod-card-rust p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
}

/* Info Tabs Section */
.info-tabs-section {
    background: transparent;
}

.info-tabs-container {
    max-width: 1200px;
    margin: 0 auto;
}

.tabs-header {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tab-btn {
    flex: 1;
    min-width: 200px;
    padding: 1.5rem 2rem;
    background: rgba(20, 15, 10, 0.6);
    border: 2px solid rgba(206, 66, 43, 0.3);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.tab-btn svg {
    transition: transform 0.3s ease;
}

.tab-btn:hover {
    background: rgba(206, 66, 43, 0.1);
    border-color: var(--rust-orange);
    color: #fff;
}

.tab-btn:hover svg {
    transform: scale(1.1);
}

.tab-btn.active {
    background: var(--gradient-primary);
    border-color: var(--rust-orange);
    color: #fff;
    box-shadow: 0 0 20px rgba(206, 66, 43, 0.4);
}

.tabs-content {
    position: relative;
}

.tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mods List */
.mods-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
}

.mod-item {
    display: grid;
    grid-template-columns: auto 1fr 2fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.mod-item:hover {
    background: rgba(206, 66, 43, 0.05);
    border-left-color: var(--rust-orange);
}

.mod-item.highlight {
    background: rgba(206, 66, 43, 0.15);
    border-left-color: var(--rust-orange);
    border-left-width: 4px;
}

.mod-bullet {
    color: var(--rust-orange);
    font-weight: 700;
    font-size: 1.125rem;
}

.mod-name {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.mod-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.mod-desc em {
    color: #ffa500;
    font-style: normal;
}

/* Commands List */
.commands-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 2rem 0;
}

.command-item {
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid var(--rust-orange);
    transition: all 0.3s ease;
}

.command-item:hover {
    background: rgba(206, 66, 43, 0.05);
    border-left-width: 4px;
}

.command-item.disabled {
    opacity: 0.5;
    border-left-color: #666;
}

.command-syntax {
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cmd {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(206, 66, 43, 0.2);
    border: 1px solid var(--rust-orange);
    border-radius: 3px;
    color: var(--rust-glow);
    font-family: 'Courier New', monospace;
    font-size: 0.875rem;
    font-weight: 700;
}

.command-item.disabled .cmd {
    background: rgba(100, 100, 100, 0.2);
    border-color: #666;
    color: #888;
}

.command-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    line-height: 1.6;
}

.command-desc em {
    color: #ffa500;
    font-style: normal;
}

/* About Section */
.about-section {
    background: transparent;
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
}

.about-container {
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.section-bracket {
    color: var(--rust-orange);
    font-size: 2rem;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(206, 66, 43, 0.6);
}

.section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-shadow:
        0 0 30px rgba(206, 66, 43, 0.4),
        0 0 60px rgba(206, 66, 43, 0.2);
    margin: 0;
}

.section-subtitle {
    font-size: 0.875rem;
    color: var(--rust-orange);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
}

.about-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* About Intro */
.about-intro {
    margin-bottom: 4rem;
}

.intro-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    text-align: center;
}

.intro-text .highlight {
    color: var(--rust-glow);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(206, 66, 43, 0.3);
}

/* About Features */
.about-features {
    margin-bottom: 4rem;
}

.features-title {
    font-size: 1.75rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
}

.title-icon {
    color: var(--rust-orange);
    font-size: 2rem;
    text-shadow: 0 0 15px rgba(206, 66, 43, 0.5);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: linear-gradient(135deg, rgba(20, 15, 10, 0.6) 0%, rgba(30, 20, 15, 0.4) 100%);
    border: 2px solid rgba(206, 66, 43, 0.2);
    border-radius: 8px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(206, 66, 43, 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card:hover {
    border-color: var(--rust-orange);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(206, 66, 43, 0.3);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(206, 66, 43, 0.3));
    flex-shrink: 0;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: 1.125rem;
    color: var(--rust-glow);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.feature-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.7;
}

/* About CTA */
.about-cta {
    background: linear-gradient(135deg, rgba(206, 66, 43, 0.1) 0%, rgba(139, 69, 19, 0.1) 100%);
    border: 3px solid var(--rust-orange);
    border-radius: 12px;
    padding: 3rem 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(206, 66, 43, 0.03) 10px,
        rgba(206, 66, 43, 0.03) 20px
    );
    animation: scanline 20s linear infinite;
    pointer-events: none;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 30px rgba(206, 66, 43, 0.5);
}

.cta-text {
    font-size: 1.125rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
}

.cta-tagline {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.tagline-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--rust-glow);
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow:
        0 0 20px rgba(206, 66, 43, 0.6),
        0 0 40px rgba(206, 66, 43, 0.3);
    animation: pulseSlow 3s ease-in-out infinite;
}

.tagline-text:nth-child(1) {
    animation-delay: 0s;
}

.tagline-text:nth-child(2) {
    animation-delay: 0.5s;
}

.tagline-text:nth-child(3) {
    animation-delay: 1s;
}

.tagline-text:nth-child(4) {
    animation-delay: 1.5s;
}

.cta-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

@keyframes pulseSlow {
    0%, 100% {
        opacity: 1;
        text-shadow:
            0 0 20px rgba(206, 66, 43, 0.6),
            0 0 40px rgba(206, 66, 43, 0.3);
    }
    50% {
        opacity: 0.8;
        text-shadow:
            0 0 30px rgba(206, 66, 43, 0.8),
            0 0 60px rgba(206, 66, 43, 0.5);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .info-split-layout {
        grid-template-columns: 1fr;
    }

    .countdown-number {
        font-size: 2.5rem;
    }

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

    .section-title {
        font-size: 2.5rem;
    }

    .cta-tagline {
        gap: 1rem;
    }

    .tagline-text {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .live-stats-bar {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }

    .stat-divider {
        width: 100%;
        height: 2px;
    }

    .rust-title {
        font-size: 3rem;
    }

    .btn-rust-connect {
        padding: 1.25rem 2rem;
    }

    .countdown-display {
        gap: 0.5rem;
    }

    .countdown-number {
        font-size: 2rem;
    }

    .countdown-separator {
        font-size: 2rem;
    }

    .mods-grid-rust {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-bracket {
        font-size: 1.5rem;
    }

    .intro-text {
        font-size: 1rem;
    }

    .features-title {
        font-size: 1.5rem;
    }

    .feature-card {
        flex-direction: column;
        text-align: center;
    }

    .feature-icon {
        font-size: 2rem;
    }

    .cta-title {
        font-size: 2rem;
    }

    .cta-text {
        font-size: 1rem;
    }

    .about-cta {
        padding: 2rem 1.5rem;
    }

    .about-section {
        padding: 4rem 0;
    }
}

/* ========================================
   CURRENT MAP SECTION - Holographic Display
   ======================================== */

.current-map-section {
    background: transparent;
    padding: 6rem 0;
    position: relative;
}

/* This section breaks out of the 1400px .container so the map and its monument
   list can use the whole page width. Scoped to the map section only — the rest
   of the site keeps the shared container width. */
.current-map-section > .container {
    max-width: none;
}

/* Map beside the monument list. The map takes a fixed width rather than an even
   split: at half a page the render was too small to pick individual monuments
   out of, since 77 icons overlap badly at that size. The map gets the space it
   needs and the list takes what is left. */
.map-display-container {
    display: grid;
    grid-template-columns: minmax(0, 900px) minmax(320px, 1fr);
    /* Row 1 is the map frame and the monument card; row 2 holds the RustMaps
       button under the map. Keeping the button out of row 1 is what lets the
       card match the map's height exactly instead of overshooting it by the
       button's height. */
    grid-template-rows: auto auto;
    gap: 3rem;
    margin-top: 3rem;
    position: relative;
    z-index: 2;
    /* stretch, not start: the monument card fills the map's height beside it */
    align-items: stretch;
}

/* align-self: start on both row-2 cards. The container is align-items:
   stretch so the monument card can match the map's height in row 1, but that
   also made these two stretch to whichever was taller — leaving dead space
   under the shorter one. Each now keeps its own height. */
.map-display-container > .seed-converter {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-top: -1.5rem;   /* pull up: the 3rem grid gap is too wide here */
}

/* Beside the RustMaps button, under the monument list. Tighter padding than
   the shared .settings-panel/.wipe-panel card rule, which was sized for a
   panel holding the countdown plus two detail rows. */
.map-display-container > .wipe-panel {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: -1.5rem;
    padding: 1.25rem 1.5rem;
}

/* Tighter vertical rhythm than the original panel, which spaced its header and
   countdown for a card that also carried two detail rows below them. */
.map-display-container > .wipe-panel .panel-header {
    margin-bottom: 1rem;
}

.map-display-container > .wipe-panel .countdown-display {
    margin: 1rem 0;
}

/* One line of text does not need 1.5rem of margin and 0.85rem of padding. */
.map-display-container > .wipe-panel .wipe-next-line {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.85rem;
}

/* Holographic Map Preview */
.map-preview-wrapper {
    position: relative;
    min-width: 0;   /* let the map shrink inside the grid track */
}

.hologram-frame {
    position: relative;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(206, 66, 43, 0.05) 0%, rgba(255, 107, 53, 0.05) 100%);
    border: 2px solid rgba(206, 66, 43, 0.3);
    border-radius: 8px;
    box-shadow:
        0 0 30px rgba(206, 66, 43, 0.2),
        inset 0 0 30px rgba(206, 66, 43, 0.1);
}

/* Holographic Corners */
.hologram-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 3px solid var(--rust-glow);
    opacity: 0.8;
    animation: cornerPulse 2s ease-in-out infinite;
}

.hologram-corner.tl {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
}

.hologram-corner.tr {
    top: -3px;
    right: -3px;
    border-left: none;
    border-bottom: none;
}

.hologram-corner.bl {
    bottom: -3px;
    left: -3px;
    border-right: none;
    border-top: none;
}

.hologram-corner.br {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
}

@keyframes cornerPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; box-shadow: 0 0 10px var(--rust-glow); }
}

/* Animated Scanline */
.hologram-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--rust-glow) 50%,
        transparent 100%
    );
    opacity: 0.6;
    animation: scanlineMove 3s linear infinite;
    z-index: 10;
}

@keyframes scanlineMove {
    0% { top: 0; opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { top: 100%; opacity: 0; }
}

/* Holographic Grid Overlay */
.hologram-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 20px,
            rgba(206, 66, 43, 0.1) 20px,
            rgba(206, 66, 43, 0.1) 21px
        ),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 20px,
            rgba(206, 66, 43, 0.1) 20px,
            rgba(206, 66, 43, 0.1) 21px
        );
    pointer-events: none;
    opacity: 0.3;
}

/* Map Preview Container
 *
 * The render fills the panel edge to edge. An earlier version inset it inside
 * an ocean-coloured frame, on the theory that the oil rigs needed sea around
 * the map to sit in — they report coordinates outside the playable square.
 * Measuring the live render disproved it: RustMaps clamps those icons back
 * inside the image rather than drawing them beyond it, so there is nothing to
 * put in a margin. The clamp is mirrored in rust.js instead. */
.map-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* The render's own ocean, so any sliver of letterboxing blends in. */
    background: #002b38;
    border-radius: 4px;
    overflow: hidden;
    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.8),
        0 4px 20px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.map-preview img {
    width: 100%;
    height: 100%;
    /* contain, not cover: cover would crop the render and slide the monument
       markers off their icons. */
    object-fit: contain;
    opacity: 0.9;
    filter: contrast(1.1) brightness(0.9);
    transition: opacity 0.3s ease;
}

/* No zoom on hover: the monument markers are positioned as percentages over
   this image, and scaling it would slide the icons out from under them. */
.map-preview:hover img {
    opacity: 1;
}

/* Map Loading State */
.map-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.5);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(206, 66, 43, 0.2);
    border-top-color: var(--rust-glow);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Holographic Labels */
.hologram-label {
    position: absolute;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--rust-glow);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Courier New', monospace;
    opacity: 0.7;
    text-shadow: 0 0 5px var(--rust-glow);
}

.hologram-label.top-left {
    top: 0.5rem;
    left: 0.5rem;
}

.hologram-label.top-right {
    top: 0.5rem;
    right: 0.5rem;
}

.hologram-label.bottom-left {
    bottom: 0.5rem;
    left: 0.5rem;
}

.hologram-label.bottom-right {
    bottom: 0.5rem;
    right: 0.5rem;
}

.hologram-label span {
    color: #ffffff;
    opacity: 0.9;
}

/* Map Stats Terminal */
/* Matches the map's height beside it. The chain has to run unbroken from the
   grid cell down to the pill list — a single `height: 100%` anywhere in the
   middle that is missing collapses the card back to its content height. */
.map-stats-terminal {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%;
}

.map-stats-terminal .terminal-window {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.map-terminal .terminal-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.map-stats-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1rem 0;
    flex: 1;
    min-height: 0;
}

.map-stats-content .monuments-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Stat Blocks */
.stat-block {
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid var(--rust-orange);
    padding: 1rem 1.25rem;
    border-radius: 4px;
}

.stat-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.75rem;
}

.label-icon {
    font-size: 1rem;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Courier New', monospace;
}

/* Seed Display */
.seed-value {
    color: var(--rust-glow);
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    letter-spacing: 2px;
}

.seed-hex {
    font-size: 0.85rem;
    font-family: 'Courier New', monospace;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.5rem;
    letter-spacing: 1px;
}

/* Size Bar */
.size-value {
    color: #ffffff;
    margin-bottom: 1rem;
}

.size-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.size-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rust-orange) 0%, var(--rust-glow) 100%);
    border-radius: 10px;
    transition: width 1s ease;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
    animation: barGlow 2s ease-in-out infinite;
}

@keyframes barGlow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.size-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'Courier New', monospace;
}

/* Wipe Info Grid */
.wipe-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wipe-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.info-key {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
}

.info-value {
    font-size: 0.9rem;
    color: #ffffff;
    font-family: 'Courier New', monospace;
}

/* BP Wipe Indicator */
.bp-wipe-indicator {
    justify-content: center;
    margin-top: 0.5rem;
}

.bp-badge {
    display: inline-block;
    background: linear-gradient(135deg, #ff6b35 0%, #ffaa00 100%);
    color: #000;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
    animation: bpPulse 2s ease-in-out infinite;
}

@keyframes bpPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 107, 53, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 107, 53, 0.8); }
}

/* Map Notes */
.map-notes {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    font-style: italic;
}

/* Seed Converter */
.seed-converter {
    background: rgba(206, 66, 43, 0.05);
    border: 1px solid rgba(206, 66, 43, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.converter-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--rust-glow);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.converter-icon {
    font-size: 1.25rem;
}

.converter-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.btn-view-map {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--rust-orange) 0%, var(--rust-glow) 100%);
    color: #000;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-view-map:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(206, 66, 43, 0.5);
}

.btn-view-map svg {
    transition: transform 0.3s ease;
}

.btn-view-map:hover svg {
    transform: rotate(5deg) scale(1.1);
}

/* Responsive Design */

/* Stack below 1400px: two columns need ~900px for the map plus ~320px for the
   terminal plus the gap, and squeezing the map tighter than that makes the
   monument icons overlap too much to hover individually. */
@media (max-width: 1400px) {
    .map-display-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    /* Centred and capped once stacked, so it does not become taller than the
       viewport on a wide-but-short screen. */
    .map-preview-wrapper {
        max-width: 900px;
        margin: 0 auto;
        width: 100%;
    }

    /* Stacked under the map, the card no longer needs to match the map's
       height — cap the list so it does not run the length of the page. */
    .map-stats-terminal,
    .map-stats-terminal .terminal-window,
    .map-terminal .terminal-body,
    .map-stats-content,
    .map-stats-content .monuments-block {
        height: auto;
        flex: none;
    }

    .monument-pills {
        flex: none;
        max-height: 280px;
    }
}

@media (max-width: 1024px) {
    .hologram-frame {
        padding: 1.5rem;
    }
}

@media (max-width: 768px) {
    .current-map-section {
        padding: 4rem 0;
    }

    .hologram-label {
        font-size: 0.6rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .size-bar-labels span:nth-child(2) {
        display: none;
    }
}

/* ========================================
   MAP ENLARGEMENT MODAL
   ======================================== */

.map-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
}

.map-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.map-modal-content {
    position: relative;
    max-width: 85vw;
    max-height: 80vh;
    padding: 1rem;
    animation: zoomIn 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.map-modal-content img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border: 3px solid var(--rust-glow);
    border-radius: 8px;
    box-shadow:
        0 0 50px rgba(206, 66, 43, 0.5),
        0 0 100px rgba(206, 66, 43, 0.3);
}

.map-modal-close {
    position: fixed;
    top: 2rem;
    right: 2rem;
    font-size: 2rem;
    color: var(--rust-glow);
    cursor: pointer;
    z-index: 10001;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.9);
    border: 2px solid var(--rust-glow);
    border-radius: 50%;
    transition: all 0.3s ease;
    line-height: 0;
    padding-bottom: 2px;
    user-select: none;
}

.map-modal-close:hover {
    background: var(--rust-primary);
    color: white;
    transform: rotate(90deg);
    box-shadow: 0 0 20px var(--rust-glow);
}