*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --deep-violet: #0b0813;
    --panel-violet: #161129;
    --electric-orchid: #df19fa;
    --cyan-glow: #00f3ff;
    --mint-green: #00ffaa;
    --text-white: #f5f3f8;
    --text-muted: #86809b;
    --glass-border: rgba(223, 25, 250, 0.15);
    --font-clean: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    background-color: var(--deep-violet);
    color: var(--text-white);
    font-family: var(--font-clean);
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.6;
}

.section-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


.glass-header {
    background: rgba(22, 17, 41, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

.cyber-logo {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-logo span {
    color: var(--electric-orchid);
    text-shadow: 0 0 15px var(--electric-orchid);
}

.live-counter {
    font-size: 13px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.03);
    padding: 6px 14px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulse-dot {
    width: 7px;
    height: 7px;
    background-color: var(--mint-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--mint-green);
    animation: pulse 1.8s infinite;
}


.btn-premium {
    background: linear-gradient(135deg, var(--electric-orchid), #8c069e);
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 4px 15px rgba(223, 25, 250, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
}

.btn-premium:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 20px rgba(223, 25, 250, 0.5);
}


.hero-display {
    position: relative;
    padding: 40px 0;
}

.hero-bg-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(223, 25, 250, 0.08) 0%, transparent 70%);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}

.game-stage {
    display: flex;
    gap: 25px;
    align-items: stretch;
}


.iframe-container {
    flex: 1;
    position: relative;
    padding-bottom: 44%; 
    height: 0;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.iframe-container iframe {
    position: absolute;
    top:0; left:0; width:100%; height:100%; border:0;
}


.radar-panel {
    width: 320px;
    background: var(--panel-violet);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.05);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.radar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 12px;
}

.radar-header h4 { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; }
.radar-status { font-size: 11px; text-transform: uppercase; color: var(--cyan-glow); font-weight: 800; }

.radar-stats { margin: 20px 0; }
.radar-row { margin-bottom: 16px; font-size: 13px; color: #d0cbdc;}

.mini-bar {
    background: rgba(255,255,255,0.05);
    height: 4px;
    border-radius: 2px;
    margin: 4px 0 2px 0;
    overflow: hidden;
}

.mini-fill {
    height: 100%;
    background: var(--electric-orchid);
    border-radius: 2px;
}

.text-green { color: var(--mint-green); font-weight: 700; }
.text-purple { color: var(--electric-orchid); font-weight: 700; }

.btn-action {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    color: #fff;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
}

.btn-action:hover { background: rgba(223, 25, 250, 0.1); }


.analytics-section { padding: 40px 0; }
.title-center { text-align: center; font-size: 22px; font-weight: 800; margin-bottom: 30px; }

.chart-glass-box {
    background: rgba(22, 17, 41, 0.4);
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 16px;
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.chart-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 200px;
    padding-top: 20px;
    border-bottom: 2px solid rgba(255,255,255,0.05);
}

.chart-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 15%;
    height: 100%;
    justify-content: flex-end;
}

.column-bar {
    width: 100%;
    background: linear-gradient(to top, rgba(223,25,250,0.2), var(--electric-orchid));
    border-radius: 6px 6px 0 0;
    position: relative;
    cursor: pointer;
}

.column-bar.highlighted {
    background: linear-gradient(to top, rgba(0,243,255,0.2), var(--cyan-glow));
}

.column-tooltip {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.column-bar:hover .column-tooltip { opacity: 1; }
.column-label { font-size: 12px; color: var(--text-muted); margin-top: 10px; }


.seo-content-container {
    max-width: 800px;
    margin: 60px auto;
    padding: 0 20px;
}

.seo-content-container h1 { font-size: 28px; font-weight: 800; margin-bottom: 18px; color: #fff; }
.seo-content-container h2 { font-size: 22px; font-weight: 700; margin: 40px 0 16px 0; color: #fff; }
.seo-content-container h3 { font-size: 18px; font-weight: 600; margin: 30px 0 12px 0; color: #fff; }
.seo-content-container p { color: #b8b3cb; margin-bottom: 20px; font-size: 15px; }
.seo-content-container ul { padding-left: 20px; margin-bottom: 25px; }
.seo-content-container li { color: #b8b3cb; margin-bottom: 8px; font-size: 15px; }
.seo-content-container strong { color: var(--cyan-glow); }

.seo-content-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    background: var(--panel-violet);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.03);
    font-size: 14px;
}

.seo-content-container th {
    background: rgba(255,255,255,0.02);
    color: #fff;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-align: left;
}

.seo-content-container td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: #b8b3cb;
}

.center-btn-wrap { text-align: center; margin-top: 35px; }


.expert-section { padding: 40px 0; background: rgba(0,0,0,0.15); }
.expert-card {
    max-width: 800px;
    margin: 0 auto;
    background: var(--panel-violet);
    border: 1px solid rgba(255,255,255,0.03);
    padding: 30px;
    border-radius: 16px;
    display: flex;
    align-items: center;
}

.expert-avatar-wrap { position: relative; width: 80px; height: 80px; flex-shrink: 0; }
.expert-avatar-wrap img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--electric-orchid); }
.status-online {
    position: absolute; bottom: 4px; right: 4px;
    width: 12px; height: 12px; background: var(--mint-green);
    border-radius: 50%; border: 2px solid var(--panel-violet);
}

.expert-details { padding-left: 25px; }
.expert-details h5 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.expert-details p { font-size: 13px; color: var(--text-muted); line-height: 1.6; }


.cyber-footer { padding: 30px 0; text-align: center; border-top: 1px solid rgba(255,255,255,0.04); background: #07050d; }
.cyber-footer p { font-size: 12px; color: #534f66; max-width: 900px; margin: 0 auto; line-height: 1.8; }


@media (max-width: 992px) {
    .game-stage { flex-direction: column; }
    .iframe-container { padding-bottom: 56.25%; } 
    .radar-panel { width: 100%; }
}

@media (max-width: 768px) {
    .header-container { flex-direction: column; gap: 12px; text-align: center; }
    .seo-content-container h1 { font-size: 22px; }
    .seo-content-container table { display: block; overflow-x: auto; }
    .expert-card { flex-direction: column; text-align: center; }
    .expert-details { padding-left: 0; margin-top: 15px; }
}

@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(0, 255, 170, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 170, 0); } }