:root {
            --bg-color: #0f1012;
            --card-bg: #181a1f;
            --accent-orange: #cd5200;
            --accent-orange-hover: #e65c00;
            --text-main: #e0e0e0;
            --text-muted: #9e9e9e;
            --border-color: #2a2d34;
        }

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

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-main);
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 1000px;
            background-color: var(--card-bg);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            overflow: hidden;
            margin-bottom: 40px;
        }

        /* Banner Header */
        .banner-container {
            position: relative;
            width: 100%;
            height: auto;
            border-bottom: 3px solid var(--accent-orange);
        }

        .banner-container img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Main Content */
        .content {
            padding: 40px 30px;
        }

        .section-title {
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-size: 1.5rem;
            color: #fff;
            margin-bottom: 20px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
        }

        /* Direct Connection Box */
        .copy-box-container {
            margin: 30px 0;
            text-align: center;
        }

        .copy-box-label {
            font-size: 0.95rem;
            color: var(--text-muted);
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .copy-box {
            display: inline-flex;
            align-items: center;
            background-color: #0b0c0e;
            border: 2px solid var(--accent-orange);
            border-radius: 6px;
            padding: 8px 12px 8px 20px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            max-width: 100%;
        }

        .copy-box:hover {
            background-color: #14161b;
            box-shadow: 0 0 15px rgba(205, 82, 0, 0.4);
        }

        .copy-box code {
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 1.1rem;
            color: #fff;
            margin-right: 15px;
            word-break: break-all;
        }

        .copy-btn {
            background-color: var(--accent-orange);
            color: #fff;
            border: none;
            padding: 10px 18px;
            border-radius: 4px;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: background-color 0.2s;
            pointer-events: none;
            white-space: nowrap;
        }

        .copy-box:hover .copy-btn {
            background-color: var(--accent-orange-hover);
        }

        /* Instruction Steps */
        .steps {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
        }

        .step-card {
            background-color: #111317;
            border: 1px solid var(--border-color);
            padding: 20px;
            border-radius: 6px;
        }

        .step-number {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--accent-orange);
            margin-bottom: 10px;
        }

        .step-card h3 {
            font-size: 1.1rem;
            color: #fff;
            margin-bottom: 8px;
        }

        .step-card p {
            font-size: 0.9rem;
            color: var(--text-muted);
            line-height: 1.4;
        }

        /* Server Mods Section (Bulleted List) */
        .mods-section {
            margin-top: 40px;
        }

        .mods-list {
            list-style: none;
            padding: 0;
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 12px;
        }

        .mods-list li {
            background-color: #111317;
            border: 1px solid var(--border-color);
            padding: 12px 18px;
            border-radius: 6px;
            color: #fff;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
        }

        .mods-list li::before {
            content: "•";
            color: var(--accent-orange);
            font-weight: bold;
            font-size: 1.4rem;
            margin-right: 12px;
            line-height: 1;
        }

        /* Toast Notification */
        .toast {
            position: fixed;
            bottom: 30px;
            background-color: var(--accent-orange);
            color: #fff;
            padding: 12px 24px;
            border-radius: 4px;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
            pointer-events: none;
        }

        .toast.show {
            opacity: 1;
            transform: translateY(0);
        }

        kbd {
            background-color: #2a2d34;
            color: #fff;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 0.85em;
            border: 1px solid #3a3d44;
        }







/* Container for the banner image to handle positioning and clipping */
.banner-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.banner-container img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

/* Base style for pseudo-element glitch overlays */
.banner-container::before,
.banner-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/banner.png');
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: 0.8;
}

/* Red/Cyan chromatic aberration layers */
.banner-container::before {
  left: 2px;
  text-shadow: -2px 0 red;
  filter: drop-shadow(-3px 0px 0px rgba(255, 0, 80, 0.75));
  animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
  z-index: 2;
}

.banner-container::after {
  left: -2px;
  filter: drop-shadow(3px 0px 0px rgba(0, 230, 255, 0.75));
  animation: glitch-anim-2 2s infinite linear alternate-reverse;
  z-index: 3;
}

/* Keyframe Animations for Slicing & Displacement */
/* Glitch Layer 1 - Slow loop with quick glitch bursts */
@keyframes glitch-anim-1 {
  /* Quiet phase (0% to 75%) */
  0%, 75%, 83%, 91%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    opacity: 0;
  }

  /* Burst 1: Quick flicker around 76%-82% */
  76% {
    clip-path: inset(15% 0 65% 0);
    transform: translate(-8px, 3px);
    opacity: 0.9;
  }
  78% {
    clip-path: inset(70% 0 10% 0);
    transform: translate(6px, -2px);
    opacity: 0.9;
  }
  80% {
    clip-path: inset(40% 0 45% 0);
    transform: translate(-4px, 4px);
    opacity: 0.9;
  }

  /* Burst 2: Second short hit around 84%-90% */
  84% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(7px, -3px);
    opacity: 0.9;
  }
  87% {
    clip-path: inset(20% 0 55% 0);
    transform: translate(-5px, 2px);
    opacity: 0.9;
  }
}

/* Glitch Layer 2 - Offset timing for asynchronous flicker */
@keyframes glitch-anim-2 {
  /* Quiet phase */
  0%, 77%, 85%, 93%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0, 0);
    opacity: 0;
  }

  /* Offset Burst 1 */
  78% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(6px, -2px);
    opacity: 0.8;
  }
  81% {
    clip-path: inset(10% 0 80% 0);
    transform: translate(-7px, 3px);
    opacity: 0.8;
  }

  /* Offset Burst 2 */
  86% {
    clip-path: inset(35% 0 50% 0);
    transform: translate(4px, -4px);
    opacity: 0.8;
  }
  89% {
    clip-path: inset(65% 0 20% 0);
    transform: translate(-6px, 1px);
  }
}

/* Update pseudo-elements to run on a longer total duration */
.banner-container::before {
  animation: glitch-anim-1 7s infinite steps(1, end);
}

.banner-container::after {
  animation: glitch-anim-2 6.5s infinite steps(1, end);
}