/* VNDEL live DDoS section (/protection). Built by assets/js/vn-live.js
   The 3D scene is a canvas that covers the WHOLE section; the content sits on top of it. */
body.lagom .site-section.vn-live-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    padding-bottom: 56px;
    background:
        radial-gradient(1200px 520px at 50% 6%, rgba(99, 102, 241, .30), transparent 70%),
        radial-gradient(800px 420px at 8% 55%, rgba(248, 113, 113, .09), transparent 70%),
        radial-gradient(800px 420px at 92% 55%, rgba(52, 211, 153, .09), transparent 70%),
        linear-gradient(180deg, #0b0f1f 0%, #070a14 100%);
}
.vn-live-section > .vn-live-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.vn-live-section > .container { position: relative; z-index: 1; }
.vn-live-section .section-title, .vn-live-section .section-subtitle { color: #f1f3ff; }
.vn-live-section .section-subtitle { opacity: .85; }

/* content block: wider than the text container, centred on the viewport */
.vn-live {
    --vn-w: 1240px;
    width: min(var(--vn-w), calc(100vw - 40px));
    margin: 8px calc(50% - min(var(--vn-w) / 2, 50vw - 20px)) 0;
    color: #e7e9ff;
}
.vn-live * { box-sizing: border-box; }

/* transparent window over the scene: only holds the overlay chips; spans the viewport width */
.vn-live-stage {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: clamp(460px, 42vw, 680px);
    background: none;
    border: 0;
}
.vn-live-badge {
    position: absolute; top: 4px; inset-inline-start: max(20px, calc((100vw - var(--vn-w, 1240px)) / 2));
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: rgba(8, 11, 22, .6); border: 1px solid rgba(255, 255, 255, .14);
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; backdrop-filter: blur(8px);
}
.vn-live-badge i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; animation: vnLivePulse 1.4s ease-in-out infinite; }
.vn-live-badge.is-attack i { background: #f87171; box-shadow: 0 0 12px #f87171; }
.vn-live-badge.is-attack { border-color: rgba(248, 113, 113, .45); color: #fecaca; }
.vn-live-badge.is-off i { background: #6b7280; box-shadow: none; animation: none; }
@keyframes vnLivePulse { 50% { opacity: .35; transform: scale(.8); } }

.vn-live-hud {
    position: absolute; top: 0; inset-inline-end: max(20px, calc((100vw - var(--vn-w, 1240px)) / 2));
    display: flex; gap: 12px;
}
.vn-hud {
    padding: 8px 16px; border-radius: 14px; min-width: 128px;
    background: rgba(8, 11, 22, .6); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px);
}
.vn-hud small { display: block; font-size: .7rem; color: #aab0d6; font-weight: 600; margin-bottom: 2px; }
.vn-hud b { display: block; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
html[dir="rtl"] .vn-hud b { text-align: right; }
.vn-hud.is-clean b { color: #34d399; }
.vn-hud.is-block b { color: #f87171; }

.vn-live-legend {
    position: absolute; bottom: 4px; inset-inline-start: max(20px, calc((100vw - var(--vn-w, 1240px)) / 2));
    display: flex; gap: 18px; flex-wrap: wrap; font-size: .78rem; color: #c3c8ea;
}
.vn-live-legend span { display: inline-flex; align-items: center; gap: 6px; }
.vn-live-legend b { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.vn-live-connecting {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #8f96c4; font-size: .95rem; pointer-events: none; transition: opacity .4s;
}
.vn-live-connecting.is-hidden { opacity: 0; }

/* glass cards over the scene */
.vn-live-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.vn-live-card, .vn-live-panel {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), rgba(10, 14, 30, .62);
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.vn-live-card { padding: 18px 22px; }
.vn-live-card small { display: block; color: #aab0d6; font-size: .8rem; margin-bottom: 8px; font-weight: 600; }
.vn-live-card strong { display: block; font-size: 1.8rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
html[dir="rtl"] .vn-live-card strong { text-align: right; }
.vn-live-card.is-clean strong { color: #34d399; }
.vn-live-card.is-block strong { color: #f87171; }
.vn-live-card.is-main strong { color: #a5b4fc; }

.vn-live-bottom { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 16px; }
.vn-live-panel { padding: 20px 22px; display: flex; flex-direction: column; }
.vn-live-panel h4 { margin: 0 0 12px; font-size: .95rem; font-weight: 700; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.vn-live-panel h4 span { font-size: .78rem; font-weight: 600; color: #aab0d6; }
.vn-live-chart { position: relative; height: 128px; flex: 1 1 128px; min-height: 100px; margin-bottom: 14px; }
.vn-live-chart:last-of-type { margin-bottom: 0; }
.vn-live-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vn-live-chart em { position: absolute; top: 0; inset-inline-start: 0; font-style: normal; font-size: .74rem; color: #aab0d6; }

.vn-live-feed { list-style: none; margin: 0; padding: 0; }
.vn-live-feed li {
    display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px; align-items: center;
    padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .86rem;
}
.vn-live-feed li:first-child { border-top: 0; }
.vn-live-feed .when { color: #aab0d6; min-width: 64px; }
.vn-live-feed .vec { display: flex; gap: 6px; flex-wrap: wrap; direction: ltr; }
.vn-live-feed .vec i {
    font-style: normal; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: rgba(248, 113, 113, .14); border: 1px solid rgba(248, 113, 113, .3); color: #fca5a5;
}
.vn-live-feed .peak { font-weight: 700; direction: ltr; font-variant-numeric: tabular-nums; }
.vn-live-feed .peak small { display: block; font-weight: 500; color: #aab0d6; font-size: .72rem; text-align: end; }
.vn-live-feed li.is-active .when { color: #f87171; font-weight: 700; }
.vn-live-empty { color: #aab0d6; padding: 10px 0; }

@media (max-width: 991px) {
    .vn-live-cards { grid-template-columns: repeat(2, 1fr); }
    .vn-live-bottom { grid-template-columns: 1fr; }
    .vn-live-stage { height: 420px; }
    .vn-live-badge, .vn-live-legend { inset-inline-start: 20px; }
    .vn-live-hud { inset-inline-end: 20px; }
    .vn-live-chart { flex: none; }
}
@media (max-width: 520px) {
    .vn-live-stage { height: 340px; }
    .vn-live-legend { bottom: -18px; font-size: .7rem; gap: 10px; }
    .vn-live-cards { margin-top: 32px; }
    .vn-hud { min-width: 0; padding: 6px 10px; }
    .vn-hud b { font-size: .95rem; }
    .vn-live-card strong { font-size: 1.35rem; }
    .vn-live-chart { height: 96px; }
}