:root {
            --l2-gold-dark: #8e6d2d;
            --l2-gold: #c5a059;
            --l2-gold-light: #f3e5ab;
            --l2-border: #2a241e;
            --ui-bg: rgba(6, 9, 13, 0.94);
            --card-inner-bg: rgba(15, 18, 24, 0.9);
        }

        body {
            background-color: #050505;
            color: #e2e2e2;
            font-family: 'Marcellus', serif;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            min-height: 100vh;
        }

        .font-sc { font-family: 'Marcellus SC', serif; }

        .bg-epic {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 130vh;
            background-image: url('https://wallpapercave.com/wp/wp11266788.jpg');
            background-size: cover;
            background-position: center 10%;
            background-repeat: no-repeat;
            z-index: -2;
        }

        .ui-overlay {
            position: absolute;
            inset: 0;
            height: 130vh;
            background: linear-gradient(to bottom, 
                rgba(0,0,0,0.05) 0%, 
                rgba(0,0,0,0.1) 20%, 
                rgba(0,0,0,0.4) 50%, 
                rgba(0,0,0,0.9) 85%, 
                rgba(0,0,0,1) 100%);
            z-index: -1;
        }

        /* Animação de Pulsar Suave */
        @keyframes logo-pulse {
            0% { transform: scale(1); filter: drop-shadow(0 0 25px rgba(197, 160, 89, 0.6)); }
            50% { transform: scale(1.02); filter: drop-shadow(0 0 35px rgba(197, 160, 89, 0.8)); }
            100% { transform: scale(1); filter: drop-shadow(0 0 25px rgba(197, 160, 89, 0.6)); }
        }

        .logo-container {
            animation: logo-pulse 4s ease-in-out infinite;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .logo-text {
            font-family: 'Cinzel Decorative', serif;
            font-size: clamp(3.5rem, 12vw, 6.5rem);
            font-weight: 900;
            background: linear-gradient(to bottom, #f3e5ab 0%, #c5a059 40%, #8e6d2d 60%, #5d441a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 0.15em;
            line-height: 1.2;
            padding-bottom: 5px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
        }

        .logo-subtext {
            font-family: 'Marcellus SC', serif;
            color: #61471b;
            letter-spacing: 0.9em;
            font-size: 1.125rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: -15px;
            opacity: 1;
            text-shadow: none;
        }

        .l2-window {
            background: var(--ui-bg);
            position: relative;
            box-shadow: 0 0 80px rgba(0,0,0,1);
            backdrop-filter: blur(12px);
            border-radius: 12px;
            max-width: 1000px;
            overflow: visible; 
            border: 1px solid var(--l2-gold-dark);
            z-index: 10;
        }

        .counter-card {
            position: relative;
            background: var(--card-inner-bg);
            border: 1px solid rgba(197, 160, 89, 0.3);
            padding: 2rem 0.5rem; 
            text-align: center;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.5);
            overflow: visible;
        }

        .counter-card:hover {
            border-color: var(--l2-gold);
            transform: translateY(-8px);
        }

        .counter-value {
            font-family: 'Marcellus SC', serif;
            font-size: clamp(2.2rem, 5vw, 4.2rem); 
            font-weight: 400;
            color: #fff;
            background: linear-gradient(to bottom, #fff 30%, var(--l2-gold-light) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 0 15px rgba(197, 160, 89, 0.4));
            line-height: 1; 
            display: block;
            margin: 0 auto;
        }

        .counter-label {
            font-family: 'Marcellus SC', serif;
            color: var(--l2-gold);
            text-transform: uppercase;
            letter-spacing: 3px;
            font-size: 0.7rem;
            margin-top: 0.6rem;
            display: block;
            opacity: 0.8;
        }

        .card-corner {
            position: absolute;
            width: 8px;
            height: 8px;
            border: 1.5px solid var(--l2-gold);
            opacity: 0.6;
        }
        .cc-tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
        .cc-tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
        .cc-bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
        .cc-br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

        .l2-btn-new {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 1.2rem 2.5rem;
            font-family: 'Marcellus SC', serif;
            text-transform: uppercase;
            letter-spacing: 2.5px;
            font-weight: 700;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            overflow: hidden;
            border: 1px solid var(--l2-gold-dark);
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            min-height: 65px;
            border-radius: 8px;
        }

        .btn-register {
            background: linear-gradient(to bottom, #d4af37, #8e6d2d);
            color: #000;
            border: 1px solid #fff;
        }
        .btn-register:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 0 40px rgba(197, 160, 89, 0.6);
            background: linear-gradient(to bottom, #f3e5ab, #c5a059);
        }

        .btn-download {
            background: rgba(30, 30, 35, 0.9);
            color: var(--l2-gold-light);
        }
        .btn-download:hover {
            border-color: var(--l2-gold-light);
            background: rgba(45, 45, 50, 1);
            color: #fff;
            transform: translateY(-5px);
            box-shadow: 0 0 30px rgba(255,255,255,0.1);
        }

        .btn-discord {
            background: rgba(88, 101, 242, 0.15);
            border-color: #5865F2;
            color: #fff;
        }
        .btn-discord:hover {
            background: rgba(88, 101, 242, 0.4);
            transform: translateY(-5px);
            box-shadow: 0 0 30px rgba(88, 101, 242, 0.5);
        }

        .btn-shine {
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: 0.6s;
        }
        .l2-btn-new:hover .btn-shine { left: 100%; }

        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--l2-gold-dark), var(--l2-gold), var(--l2-gold-dark), transparent);
            margin: 2.5rem 0;
            opacity: 0.4;
        }

        .window-corner {
            position: absolute;
            width: 40px;
            height: 40px;
            z-index: 5;
            opacity: 0.7;
        }
        .wc-tl { top: 0px; left: 0px; border-top: 3px solid var(--l2-gold); border-left: 3px solid var(--l2-gold); border-top-left-radius: 10px; }
        .wc-tr { top: 0px; right: 0px; border-top: 3px solid var(--l2-gold); border-right: 3px solid var(--l2-gold); border-top-right-radius: 10px; }
        .wc-bl { bottom: 0px; left: 0px; border-bottom: 3px solid var(--l2-gold); border-left: 3px solid var(--l2-gold); border-bottom-left-radius: 10px; }
        .wc-br { bottom: 0px; right: 0px; border-bottom: 3px solid var(--l2-gold); border-right: 3px solid var(--l2-gold); border-bottom-right-radius: 10px; }

        .main-container {
            margin-top: 2vh; 
            width: 100%;
            max-width: 1152px; 
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .logo-spacer {
            height: 25vh; 
            min-height: 200px;
        }

        /* GRADE DE REDES SOCIAIS */
        .social-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            width: 100%;
            max-width: 900px;
            margin-bottom: 3rem;
            align-items: stretch;
        }

        .social-card {
            position: relative;
            background: rgba(15, 18, 24, 0.85);
            border: 1px solid var(--l2-gold-dark);
            border-radius: 8px;
            padding: 1rem; /* Reduzido de 1.5rem */
            text-decoration: none;
            transition: all 0.4s ease;
            backdrop-filter: blur(10px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: auto; /* Garante que a altura seja baseada no conteúdo reduzido */
        }

        .social-card:hover {
            border-color: var(--l2-gold);
            transform: translateY(-5px);
            background: rgba(25, 30, 40, 0.95);
            box-shadow: 0 15px 40px rgba(0,0,0,0.6), 0 0 25px rgba(197, 160, 89, 0.15);
        }

        .card-header {
            display: flex;
            align-items: center; /* Centralizado para altura menor */
            gap: 1rem;
            margin-bottom: 0.75rem;
        }

        .avatar-container {
            width: 55px; /* Reduzido de 70px */
            height: 55px; /* Reduzido de 70px */
            border-radius: 50%;
            border: 2px solid var(--l2-gold);
            padding: 2px;
            background: #000;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .avatar-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
        }

        .profile-info {
            flex-grow: 1;
        }

        .profile-username {
            font-family: 'Marcellus SC', serif;
            font-size: 1rem;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }

        .profile-stats {
            display: flex;
            gap: 0.8rem;
            font-size: 0.75rem;
            color: #ccc;
        }

        .profile-stats span b {
            color: #fff;
        }

        .profile-bio {
            font-size: 0.8rem;
            color: #e2e2e2;
            line-height: 1.4;
            margin-top: 0.2rem;
            border-top: 1px solid rgba(142, 109, 45, 0.2);
            padding-top: 0.5rem;
        }

        .profile-bio p {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1px;
        }

        .profile-link {
            color: #3897f0;
            font-size: 0.8rem;
            text-decoration: none;
            margin-top: 0.4rem;
            display: block;
            font-weight: bold;
        }

        @media (max-width: 1024px) {
            .social-grid { max-width: 95%; }
        }

        @media (max-width: 768px) {
            .main-container { margin-top: 2vh; }
            .logo-spacer { height: 20vh; }
            .counter-card { padding: 1.2rem 0.25rem; }
            .counter-value { font-size: 2.2rem; }
            .l2-window { padding: 2rem 1rem; border-radius: 10px; }
            .wc-tl, .wc-tr, .wc-bl, .wc-br { border-radius: 8px; width: 30px; height: 30px; }
            .l2-btn-new { border-radius: 6px; }
            .social-grid { grid-template-columns: 1fr; padding: 0 1rem; }
            .card-header { gap: 1rem; }
            .avatar-container { width: 50px; height: 50px; }
            .bg-epic { background-position: center 10%; }
        }