/* BF4 warzone global background and glass UI test */
html body {
    background: #080914;
}

#main-wrapper {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 87, 28, .12), transparent 30%),
        radial-gradient(circle at 28% 26%, rgba(0, 163, 255, .1), transparent 30%),
        linear-gradient(145deg, #06101b 0%, #11111d 45%, #1c0e0d 100%);
}

.battle-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 18%, rgba(255, 87, 28, .2), transparent 30%),
        radial-gradient(circle at 28% 26%, rgba(0, 163, 255, .16), transparent 30%),
        linear-gradient(145deg, #06101b 0%, #11111d 45%, #1c0e0d 100%);
}

.battle-bg::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse at 18% 62%, rgba(0, 163, 255, .15), transparent 32%),
        radial-gradient(ellipse at 72% 44%, rgba(255, 122, 26, .18), transparent 28%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 118px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 76px);
    animation: bf4BattleDrift 18s linear infinite;
}

.battle-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0 46%, rgba(255, 122, 26, .1) 48%, transparent 52%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 4px);
    mix-blend-mode: screen;
    opacity: .48;
}

.battle-tracer {
    position: absolute;
    left: -42vw;
    width: 34vw;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 193, 90, .15), rgba(255, 122, 26, .86), transparent);
    filter: drop-shadow(0 0 10px rgba(255, 122, 26, .82));
    transform: rotate(-12deg);
    animation: bf4Tracer 3.2s linear infinite;
}

.battle-tracer-1 { top: 18%; }
.battle-tracer-2 { top: 34%; animation-delay: .8s; animation-duration: 4s; transform: rotate(-18deg); }
.battle-tracer-3 { top: 68%; animation-delay: 1.4s; animation-duration: 4.4s; transform: rotate(-14deg); }
.battle-tracer-4 { top: 82%; animation-delay: 2.1s; animation-duration: 3.5s; transform: rotate(-10deg); }

.battle-ember {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ffc15a;
    box-shadow: 0 0 14px rgba(255, 122, 26, .9);
    opacity: .58;
    animation: bf4Ember 6s linear infinite;
}

.battle-ember-1 { left: 18%; top: 84%; animation-delay: .2s; }
.battle-ember-2 { left: 56%; top: 88%; animation-delay: 1.4s; }
.battle-ember-3 { left: 82%; top: 82%; animation-delay: 2.2s; }
.battle-ember-4 { left: 44%; top: 92%; animation-delay: 3.2s; }

.battle-smoke {
    position: absolute;
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 64%);
    filter: blur(28px);
    opacity: .32;
    animation: bf4Smoke 16s ease-in-out infinite alternate;
}

.battle-smoke-1 { left: -10vw; top: 8vh; }
.battle-smoke-2 { right: -18vw; bottom: -18vw; animation-delay: -5s; }

.nav-header,
.header,
.deznav,
.content-body,
.footer,
.chatbox {
    position: relative;
    z-index: 2;
}

.nav-header,
.header,
.deznav {
    background: rgba(9, 10, 18, .46) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255,255,255,.08) !important;
}

.header .header-content,
.deznav .deznav-scroll {
    background: transparent !important;
}

.content-body {
    background: transparent !important;
}

.card,
.newcal-card,
.dataTablesCard,
.prettytable,
.subsection,
.tablecontents,
.count,
.countheader,
.row_table_map .grid_map_block {
    background-color: rgba(18, 19, 31, .52) !important;
    border-color: rgba(255,255,255,.12) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255,255,255,.04);
}

.tablecontents,
.count,
.countheader,
.subsection {
    box-shadow: none;
}

.card-footer,
.card-header {
    background: rgba(18, 19, 31, .28) !important;
    border-color: rgba(255,255,255,.1) !important;
}

.form-control,
.newcal-wrap input,
.newcal-wrap textarea,
.newcal-wrap select,
.newcal-player-button {
    background: rgba(18, 19, 31, .56) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: #fff !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.btn-primary,
.search_active {
    box-shadow: 0 0 28px rgba(255, 122, 26, .28);
}

.dashboard_bar {
    position: relative;
    text-shadow: 0 0 16px rgba(255, 122, 26, .18);
}

.bf4x-preview-original {
    position: relative;
    isolation: isolate;
}

.bf4x-preview-original .card,
.bf4x-preview-original .dataTablesCard {
    position: relative;
    z-index: 2;
}

.bf4x-preview-original .grid_map_block {
    position: relative;
    overflow: visible;
}

.bf4x-preview-original .grid_map_block .name_map_img {
    position: relative;
    overflow: hidden;
}

.bf4x-preview-original .grid_map_block .name_map_img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 122, 26, .16) 48%, transparent 64%);
    transform: translateX(-120%);
    pointer-events: none;
}

.bf4x-preview-original .active_map {
    box-shadow: 0 0 0 2px rgba(255, 122, 26, .9), 0 0 36px rgba(255, 122, 26, .25) !important;
}

.bf4x-preview-original .active_map .name_map_img::after {
    animation: bf4CardScan 4.6s ease-in-out infinite;
}

.bf4x-preview-original .next_level_map {
    box-shadow: 0 0 0 2px rgba(0, 163, 255, .8), 0 0 36px rgba(0, 163, 255, .18) !important;
}

.bf4x-preview-original .map_now_label,
.bf4x-preview-original .map_next_label {
    z-index: 5;
    bottom: -1.05rem;
    line-height: .95;
    pointer-events: none;
    text-shadow: 0 2px 4px #000, 0 0 15px currentColor;
}

.bf4x-preview-original .vip-board-main {
    color: #ffc15a;
    text-shadow: 0 0 15px rgba(255, 122, 26, .9), 0 0 50px rgba(255, 122, 26, .34);
    animation: bf4Heat 1.8s ease-in-out infinite;
}

@keyframes bf4BattleDrift {
    to { transform: translate3d(-90px, -45px, 0); }
}

@keyframes bf4Tracer {
    to { transform: translateX(160vw) rotate(-12deg); }
}

@keyframes bf4Ember {
    0% { transform: translateY(0) scale(.8); opacity: 0; }
    12% { opacity: .75; }
    100% { transform: translateY(-76vh) translateX(80px) scale(.2); opacity: 0; }
}

@keyframes bf4Smoke {
    to { transform: translate3d(90px, -42px, 0) scale(1.14); }
}

@keyframes bf4CardScan {
    0%, 45% { transform: translateX(-120%); }
    82%, 100% { transform: translateX(120%); }
}

@keyframes bf4Heat {
    50% { filter: brightness(1.3) saturate(1.2); transform: scale(1.02); }
}

@media (max-width: 767px) {
    .battle-bg::before {
        inset: -35%;
        background:
            radial-gradient(ellipse at 18% 26%, rgba(0, 163, 255, .18), transparent 34%),
            radial-gradient(ellipse at 82% 20%, rgba(255, 122, 26, .15), transparent 30%),
            repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 92px),
            repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 64px);
    }

    .battle-tracer {
        width: 72vw;
        opacity: .72;
    }

    .battle-smoke {
        width: 88vw;
        height: 88vw;
        opacity: .24;
    }

    .bf4x-preview-original .grid_map_block,
    .bf4x-preview-original .active_map,
    .bf4x-preview-original .next_level_map {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .battle-bg::before,
    .battle-tracer,
    .battle-ember,
    .battle-smoke,
    .bf4x-preview-original .active_map .name_map_img::after,
    .bf4x-preview-original .vip-board-main {
        animation: none !important;
    }
}