/**
 * Main Styles for Shadowhunter Gaming Website
 * Modern gaming theme with dark mode and vibrant accents
 */

/* CSS Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --primary: #ff6b35;
    --primary-dark: #e85a28;
    --secondary: #ff8c42;
    --accent: #ffa552;
    --bg-dark: #0a0a0a;
    --bg-darker: #000000;
    --bg-card: rgba(20, 20, 20, 0.8);
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.7);
    --border: rgba(255, 107, 53, 0.2);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
    --gradient-secondary: linear-gradient(135deg, #e85a28 0%, #ff6b35 100%);
    --gradient-dark: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 100%);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.loaded {
    opacity: 1;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 6rem 2rem 2rem;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/hero2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

.hero-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 140, 66, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 107, 53, 0.03) 2px,
            rgba(255, 107, 53, 0.03) 4px
        );
    opacity: 0.5;
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
}

.hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.glitch {
    position: relative;
    display: inline-block;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 30px rgba(255, 107, 53, 0.5),
        0 0 60px rgba(255, 140, 66, 0.3);
}

.glitch.glitch-active::before,
.glitch.glitch-active::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.glitch.glitch-active::before {
    animation: glitch-1 0.3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch.glitch-active::after {
    animation: glitch-2 0.3s infinite;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
    0%, 100% { transform: translate(0); }
    33% { transform: translate(-2px, 2px); }
    66% { transform: translate(2px, -2px); }
}

@keyframes glitch-2 {
    0%, 100% { transform: translate(0); }
    33% { transform: translate(2px, -2px); }
    66% { transform: translate(-2px, 2px); }
}

.hero-subtitle {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hero-description {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-muted);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.5);
}

.btn-secondary {
    background: rgba(88, 101, 242, 0.1);
    color: white;
    border-color: #5865f2;
}

.btn-secondary:hover {
    background: #5865f2;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(88, 101, 242, 0.4);
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.mouse {
    width: 30px;
    height: 50px;
    border: 2px solid var(--primary);
    border-radius: 15px;
    position: relative;
    animation: float 2s ease-in-out infinite;
}

.wheel {
    width: 4px;
    height: 10px;
    background: var(--primary);
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll 1.5s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes scroll {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(15px); }
}

/* Stats Section */
/* Carries the hero's artwork rather than a flat black fill, so the band
   between the hero and the games section reads as a continuation of the image
   above it. The stat cards use backdrop-filter, which did nothing while this
   sat on solid --bg-darker. */
.stats-section {
    padding: 6rem 2rem;
    background-image:
        linear-gradient(180deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.75) 50%, rgba(10, 10, 10, 0.88) 100%),
        url('/images/hero2.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: scroll, fixed;
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

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

.stat-card {
    /* Frosted glass, matching the feature cards further down the page — the
       section behind now has artwork for the blur to work against. */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.32) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
}

.stat-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.stat-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
}

.stat-icon {
    color: var(--primary);
    margin-bottom: 1rem;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 900;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 500;
}

/* Section Titles */
.section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.2rem;
    margin-bottom: 4rem;
}

/* Games Section */
.games-section {
    position: relative;
    padding: 6rem 2rem;
    background: var(--bg-dark);
    overflow: hidden;
    z-index: 1;
}

.games-section-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* JPEG, not PNG: this is photographic artwork with no transparency, and
       the PNG it replaced was 2.6 MB against this one's 266 KB. */
    background-image: url('/images/games.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}

.games-section-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 140, 66, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
}

.games-section > .container {
    position: relative;
    z-index: 10;
}

.games-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Each card is a link to that game's server page. Anchor defaults are reset
   so the card looks identical to when it was a div. */
.game-card {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s ease;
}

/* A game with no page yet. Still a card so the row reads as three, but not a
   link: no pointer cursor, and dimmed so it is clearly not ready. The hover
   lift in main.js applies to every .game-card, so it is cancelled here. */
.game-card-soon {
    cursor: default;
    opacity: 0.75;
}

.game-card-soon:hover {
    transform: translateY(0) scale(1) !important;
}

/* No grayscale here: the image is a logo on black, matching the other two
   cards, and desaturating it just muted the red without reading as "not
   ready". The dimmed card and the Coming Soon label carry that on their own. */
.game-card-soon .game-image img {
    filter: none;
}

.game-card-soon .game-stat {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* Visible focus ring for keyboard navigation */
.game-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 20px;
}

.game-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Two classes, so it outranks .game-card.animate-in above — otherwise the
   reveal animation would set a placeholder card back to full opacity. */
.game-card-soon.animate-in {
    opacity: 0.75;
}

.game-card-inner {
    position: relative;
    height: 100%;
}

.game-card-front {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.game-card:hover .game-card-front {
    border-color: var(--primary);
    box-shadow: 0 20px 60px rgba(255, 107, 53, 0.4);
}

.game-image {
    height: 250px;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.game-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(20, 20, 20, 0.6), transparent);
    z-index: 1;
    pointer-events: none;
}

.game-info {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.game-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.game-description {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    flex: 1;
}

.game-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.game-stat.online {
    color: #10b981;
}

.game-stat.offline {
    color: #ef4444;
}

/* Shown while the live count is still being fetched */
.game-stat.pending {
    color: var(--text-muted);
}

/* Features Section */
/* Its own artwork rather than the flat dark gradient it used to carry. The
   cards already use backdrop-filter, so until now they had a blur with nothing
   behind them to blur. The overlay is heaviest at the bottom, where the cards
   sit, and lighter at the top where the image is mostly sky. */
.features-section {
    padding: 6rem 2rem;
    background-image:
        linear-gradient(180deg, rgba(10, 10, 10, 0.68) 0%, rgba(10, 10, 10, 0.6) 40%, rgba(10, 10, 10, 0.85) 100%),
        url('/images/features_bg.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: scroll, fixed;
    position: relative;
    overflow: hidden;
}

.features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.features-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

/* Three across rather than auto-fit's four: with five cards, four per row
   leaves one stranded alone on the second line. Three gives 3 + 2, which
   reads as a deliberate arrangement. */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Two across between 768px and 900px. Below 768px an existing rule further
   down this file already drops every grid to a single column. */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.feature-card {
    /* Lighter than the near-opaque black it used to be, now that there is
       artwork behind the section for the blur to work against. */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.32) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
            backdrop-filter: blur(14px) saturate(1.15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 140, 66, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.feature-card.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.feature-card:hover {
    transform: translateY(-15px) scale(1.05);
    border-color: rgba(255, 107, 53, 0.5);
    box-shadow:
        0 25px 50px rgba(255, 107, 53, 0.3),
        0 0 0 1px rgba(255, 107, 53, 0.2),
        inset 0 0 30px rgba(255, 107, 53, 0.1);
}

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

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

.feature-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 140, 66, 0.1));
    border-radius: 50%;
    color: var(--primary);
    transition: all 0.4s ease;
    position: relative;
}

.feature-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    opacity: 0;
    filter: blur(10px);
    transition: opacity 0.4s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.3), rgba(255, 140, 66, 0.2));
}

.feature-card:hover .feature-icon::before {
    opacity: 0.5;
}

.feature-icon svg {
    position: relative;
    z-index: 1;
}

.feature-card h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-card p {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1rem;
}

/* Page Hero Section */
.page-hero {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 8rem 2rem 4rem;
    margin-top: 0;
}

.page-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.page-hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.4);
}

.page-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 107, 53, 0.15) 0%, transparent 50%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 1;
}

.page-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
}

.page-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    margin-bottom: 1rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 30px rgba(255, 107, 53, 0.5),
        0 0 60px rgba(255, 140, 66, 0.3);
}

.page-subtitle {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Content Section */
.content-section {
    padding: 6rem 2rem;
    background: rgba(10, 10, 10, 0.6);
    position: relative;
}

/* ARK Page Background */
body.ark-page {
    position: relative;
}

body.ark-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/ark_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: -2;
}

body.ark-page::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.7) 0%, rgba(0, 0, 0, 0.85) 100%);
    z-index: -1;
}

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

/* Cluster Tiers */
/* External links above the cluster section (live maps, etc.) */
.ark-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2.5rem;
}

.ark-link {
    text-decoration: none;
}

.cluster-tiers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 4rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* This element exists only to provide the perspective for the flip.
   It must NOT get transform, backdrop-filter, filter, opacity < 1, or
   will-change — each of those creates a containing block that flattens the
   3D scene, letting the front face show through the back mirrored.
   Style the faces instead. */
.cluster-tier {
    background: rgba(20, 20, 20, 0.5);
    border: 2px solid var(--border);
    border-radius: 24px;
    padding: 3rem;
    position: relative;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    perspective: 1600px;
}

/* The element that actually rotates. It owns the 3D context. */
.cluster-tier-inner {
    position: relative;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

/* The flip and the hover lift are combined into this single transform.
   They cannot be split across two elements: a transform on .cluster-tier
   would replace its perspective containing block and flatten the flip. */
.cluster-tier.premium:hover .cluster-tier-inner {
    transform: translateY(-10px) rotateY(180deg);
}

.cluster-tier.standard:hover .cluster-tier-inner {
    transform: translateY(-5px) rotateY(180deg);
}

/* Touch devices have no hover, so the card flips on tap instead */
@media (hover: none) {
    .cluster-tier {
        cursor: pointer;
    }

    .cluster-tier.premium:hover .cluster-tier-inner,
    .cluster-tier.standard:hover .cluster-tier-inner {
        transform: none;
    }

    .cluster-tier.flipped .cluster-tier-inner {
        transform: rotateY(180deg);
    }
}

/* Both faces need their own preserve-3d. Without it they compute to
   transform-style: flat, and backface-visibility has no 3D context to cull
   against — so neither face is ever hidden and the front bleeds through
   the back, mirrored. */
.cluster-tier-front,
.cluster-tier-back {
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    /* Opaque, so nothing behind the visible face can show through even
       mid-rotation when the two are momentarily edge-on. */
    background: #131313;
    border-radius: 16px;
}

/* The front sits in normal flow and gives the card its height */
.cluster-tier-front {
    position: relative;
}

/* The back is overlaid on the front, pre-rotated so the flip lands face-on.
   It fills the front's height exactly; the mod list scrolls within it. */
.cluster-tier-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

/* Mod list — the scrollable part of the back face.
   Scrolling lives here rather than on .cluster-tier-back because a scroll
   container on a backface-visibility element creates its own stacking
   context, which breaks the 3D flip. */
.mods-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 1rem;
    padding-right: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mod-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 107, 53, 0.05);
    border: 1px solid rgba(255, 107, 53, 0.15);
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.mod-item:hover {
    background: rgba(255, 107, 53, 0.12);
    border-color: rgba(255, 107, 53, 0.4);
    transform: translateX(3px);
}

/* Load-order position, so the sequence is readable at a glance */
.mod-position {
    flex-shrink: 0;
    min-width: 1.75rem;
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mod-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scrollbar styling for the mod list */
.mods-list::-webkit-scrollbar {
    width: 6px;
}

.mods-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
}

.mods-list::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.4);
    border-radius: 3px;
}

.mods-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.6);
}

/* Premium Tier - Angels */
.cluster-tier.premium {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.15) 0%, rgba(255, 140, 66, 0.08) 100%);
    border: 2px solid rgba(255, 107, 53, 0.5);
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.4);
}

/* No transform here. A transform on this element would replace the
   perspective's containing block, flattening the 3D scene and letting the
   front show through the back mirrored. The lift lives on
   .cluster-tier-inner instead, combined with the flip rotation. */
.cluster-tier.premium:hover {
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.6);
}

/* Standard Tier - Vanilla */
.cluster-tier.standard {
    border: 2px solid var(--border);
}

/* As above — no transform on the perspective element. */
.cluster-tier.standard:hover {
    border-color: rgba(255, 107, 53, 0.3);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Tier Badge */
.tier-badge {
    position: absolute;
    top: -15px;
    right: 2rem;
    background: var(--gradient-primary);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    z-index: 10;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Tier Header */
.tier-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.tier-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cluster-tier.standard .tier-title {
    background: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tier-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Tier Features */
.tier-features {
    margin-bottom: 2rem;
}

.tier-features h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    color: var(--text);
}

.feature-list li svg {
    color: var(--primary);
    flex-shrink: 0;
}

/* Tier Maps */
.tier-maps {
    margin-bottom: 2rem;
}

.tier-maps h4 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--primary);
}

.maps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.map-card {
    background: rgba(255, 107, 53, 0.05);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.map-card:hover {
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.4);
    transform: translateY(-3px);
}

.map-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}













/* Status dot beside the player count. Its colour is inherited from the
   .status-* modifier on the parent .map-card. */
.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: pulse 2s infinite;
}

/* An offline server has nothing to pulse about */
.map-card.status-offline .status-indicator {
    animation: none;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* Live player count on a map card */
.map-players {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
}

/* Map cards carry their server's state, so the border reflects it */
.map-card.status-online {
    border-color: rgba(16, 185, 129, 0.35);
}

.map-card.status-offline {
    border-color: rgba(239, 68, 68, 0.3);
    opacity: 0.65;
}

.map-card.status-starting {
    border-color: rgba(245, 158, 11, 0.35);
}

/* The count inherits the state colour from the card */
.map-card.status-online .map-players {
    color: #10b981;
}

.map-card.status-offline .map-players {
    color: #ef4444;
}

.map-card.status-starting .map-players {
    color: #f59e0b;
}

/* Placeholder shown while loading, when a cluster is empty,
   or when the API cannot be reached */
.ark-empty {
    grid-column: 1 / -1;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    font-size: 0.9rem;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}













.map-card span {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 500;
}

/* Tier Action */
.tier-action {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.btn-premium {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 1.2rem 3rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.6);
}

.btn-standard {
    background: rgba(255, 107, 53, 0.1);
    color: white;
    border: 2px solid var(--primary);
    padding: 1.2rem 3rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-standard:hover {
    background: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
}

.tier-pricing {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Footer */
.site-footer {
    background: var(--bg-darker);
    border-top: 1px solid var(--border);
    padding: 4rem 2rem 2rem;
    /* Positioned so it paints above the Rust page's fixed background video,
       which sits at z-index 0. Without this the footer has no stacking
       position of its own and the video shows through its background. */
    position: relative;
    z-index: 2;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-section h4 {
    color: var(--primary);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
}

.footer-section p {
    color: var(--text-muted);
    line-height: 1.8;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.75rem;
}

.footer-section ul li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--primary);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border: none;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
    max-width: calc(100vw - 4rem);
    max-height: calc(100vh - 4rem);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.scroll-to-top:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(255, 107, 53, 0.5);
}

.scroll-to-top .progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
    pointer-events: none;
}

.scroll-to-top .progress-ring-fill {
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;
    transition: stroke-dashoffset 0.1s linear;
}

.scroll-to-top .arrow-up {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ff6b35;
    pointer-events: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .cluster-tiers {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Scale goes on the inner element, combined with the flip rotation.
       Putting a transform on .cluster-tier would replace its perspective
       containing block and flatten the flip on this breakpoint. */
    .cluster-tier.premium:hover .cluster-tier-inner {
        transform: scale(1.02) translateY(-5px) rotateY(180deg);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

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

    .maps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .cluster-tier {
        padding: 2rem;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .stats-section,
    .games-section,
    .features-section {
        padding: 4rem 1rem;
    }

    .scroll-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
    }

    .scroll-to-top .progress-ring {
        width: 50px;
        height: 50px;
    }

    .scroll-to-top .progress-ring-circle {
        r: 21;
        cx: 25;
        cy: 25;
    }

    .scroll-to-top .arrow-up {
        width: 20px;
        height: 20px;
    }
}

/* Stagger animation delays for cards */
.stat-card:nth-child(1) { transition-delay: 0.1s; }
.stat-card:nth-child(2) { transition-delay: 0.2s; }
.stat-card:nth-child(3) { transition-delay: 0.3s; }
.stat-card:nth-child(4) { transition-delay: 0.4s; }

.game-card:nth-child(1) { transition-delay: 0.1s; }
.game-card:nth-child(2) { transition-delay: 0.2s; }
.game-card:nth-child(3) { transition-delay: 0.3s; }

.feature-card:nth-child(1) { transition-delay: 0.1s; }
.feature-card:nth-child(2) { transition-delay: 0.2s; }
.feature-card:nth-child(3) { transition-delay: 0.3s; }
.feature-card:nth-child(4) { transition-delay: 0.4s; }
.feature-card:nth-child(5) { transition-delay: 0.5s; }
.feature-card:nth-child(6) { transition-delay: 0.6s; }