/* ==========================================================================
   GLOBAL VARIABLES & BRAND IDENTITY
   ========================================================================== */
:root {
    /* Brand Colors */
    --primary-color: #3b82f6;
    --steam-color: #1b2838;
    --ps-color: #0070d1;
    --xbox-color: #107c10;
    --nintendo-color: #e60012;
    --discord-color: #5865F2;
    --steam-blue: #66c0f4; 
    
    /* UI Colors */
    --bg-dark: #18191a;
    --bg-light: #f8fafc;
    --bg-charcoal: #333;
    --text-white: #ffffff;
    --text-muted: #888888;
    --text-main: #1e293b;
    --void-black: #0a0a0a;
    --spectral-green: #52a49b;
    --bone-white: #e0e0e0;
    --fog-grey: #828282;
    --text-subtitle: #2f89bc;

    --bg-body: #050505;
    --bg-card-gradient: linear-gradient(145deg, #0e0e0e, #050505);
    
    --gold: #d4af37;
        
    /* Borders & Spacing */
    --border-color: #222;
    --radius-sm: 2px;
    --radius-md: 4px;

    /* Animation Defaults */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   RESET & GLOBAL SETTINGS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    width: 100%;
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-dark);
    color: var(--text-white);
}

section {
    max-width: 100%;
    /* Logical Padding: block (top/bottom) and inline (left/right) */
    padding-block: 40px; 
    padding-inline: 20px;
    text-align: center;
}

p {
    max-width: 600px;
    width: 90%;
    /* Logical Margin: Centers the block horizontally regardless of direction */
    margin-block: 0;
    margin-inline: auto; 
    line-height: 1.6;
}

.justified-text {
    text-align: justify;
    hyphens: auto;
}

/* ==========================================================================
   DECORATIVE ELEMENTS
   ========================================================================== */
h2 {
    position: relative;
    /* Logical padding and margin at the end of the block (bottom) */
}

h2::after {
    content: "";
    display: block;
    /* Logical spacing: 10px top, auto side centering, 0 bottom */
    margin-block: 10px 0; 
    margin-inline: auto;   
    width: 200px;
    height: 6px;
    /* Gradient flows toward the 'inline-end' (right in LTR, left in RTL) */
    background: linear-gradient(to inline-end, #3b82f6, #2563eb, #3b82f6);
    clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
}

/* ==========================================================================
   SECTION-SPECIFIC CONSTRAINTS
   ========================================================================== */

/* Intro text section constraints */
.description-section p {
    max-width: 600px;
    width: 90%;
    margin-block: 0;
    margin-inline: auto;
    line-height: 1.6;
}

/* About the Game section constraints */
.about-section .description {
    max-width: 800px;
    width: 55%;
    /* Logical margin at the start of the block (top) */
    margin-block-start: 30px; 
    margin-inline: auto;
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 1024px) {
    section {
        padding-block: 60px;
        padding-inline: 20px;
    }
    
    .about-section .description,
    .description-section p {
        width: 85%;
    }
}