:root{
    --bg:#050505;
    --panel:#101010;
    --panel-2:#161616;
    --accent:#ff3b3b;
    --accent-2:#00e5ff;
    --green:#2ecc71;
    --amber:#f1c40f;
    --blue:#3498db;
    --text:#e8e8e8;
    --muted:#8a8a8a;
}

body.war-bg {
    background: var(--bg);
    color: var(--text);
    font-family: "Courier New", "Segoe UI", sans-serif;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}
body.war-bg > *:not(.war-effects):not(#site-header) { position: relative; z-index: 10; }
body.war-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url('../images/hero_bg.jpg') center/cover no-repeat;
    opacity: 0.12;
    filter: grayscale(100%);
    z-index: 0;
    pointer-events: none;
}
body.war-bg::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(900px 500px at 50% 10%, rgba(255,59,59,0.08), transparent 60%), rgba(0,0,0,0.6);
    z-index: 0;
    pointer-events: none;
}

.logo-img {
    height: 34px;
    width: auto;
    vertical-align: middle;
    margin-right: 8px;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

/* Let war effects show through auth pages */
body.war-bg .auth-wrapper {
    background: transparent !important;
}

body.war-bg #site-header {
    background: #000;
    border-bottom: 1px solid #222;
    position: sticky;
    top: 0;
    z-index: 1300;
}
body.war-bg #site-header #site-nav { z-index: 1301; }

.text-accent { color: var(--accent); }
a { color: inherit; }

.war-effects { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; opacity: 0.7; }
.smoke {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: radial-gradient(ellipse at 25% 35%, rgba(140,140,140,0.22), transparent 55%),
                radial-gradient(ellipse at 70% 55%, rgba(200,200,200,0.16), transparent 60%),
                radial-gradient(ellipse at 45% 80%, rgba(110,110,110,0.25), transparent 65%);
    filter: blur(10px);
    opacity: 0.95;
    animation: smokeDrift 24s linear infinite;
    transform: translate3d(0,0,0);
}
.smoke.smoke-2 { animation-duration: 36s; opacity: 0.8; filter: blur(14px); }
.smoke.smoke-3 {
    animation-duration: 48s;
    opacity: 0.7;
    filter: blur(18px);
    background: radial-gradient(ellipse at 40% 40%, rgba(180,180,180,0.18), transparent 60%),
                radial-gradient(ellipse at 80% 70%, rgba(120,120,120,0.22), transparent 65%);
}
.flash {
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 60% 35%, rgba(255,200,120,0.28), transparent 60%);
    mix-blend-mode: screen;
    animation: flashPulse 9s ease-in-out infinite;
}
.bomb-flash {
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,230,170,0.8) 0%, rgba(255,140,60,0.35) 35%, rgba(0,0,0,0) 70%);
    mix-blend-mode: screen;
    filter: blur(2px);
    opacity: 0;
    animation: bombFlash 8s infinite;
}
.bomb-flash.b1 { top: 10%; left: 12%; width: 180px; height: 180px; animation-delay: -0.8s; }
.bomb-flash.b2 { top: 62%; left: 78%; width: 260px; height: 260px; animation-delay: -2.4s; }
.bomb-flash.b3 { top: 40%; left: 52%; width: 220px; height: 220px; animation-delay: -4.6s; }
.bomb-flash.b4 { top: 18%; left: 70%; width: 140px; height: 140px; animation-delay: -1.2s; }
.bomb-flash.b5 { top: 72%; left: 22%; width: 300px; height: 300px; animation-delay: -3.6s; }
.bomb-flash.b6 { top: 48%; left: 30%; width: 190px; height: 190px; animation-delay: -5.4s; }
.embers {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 20% 80%, rgba(255,140,60,0.6), transparent 60%),
        radial-gradient(1px 1px at 60% 30%, rgba(255,200,120,0.45), transparent 60%),
        radial-gradient(2px 2px at 80% 65%, rgba(255,160,90,0.5), transparent 60%);
    animation: emberFloat 6s ease-in-out infinite;
    opacity: 0.6;
}
.alert-flicker { color: var(--accent); letter-spacing: 3px; font-size: 0.85rem; text-transform: uppercase; margin-top: 6px; animation: alertFlicker 2.4s infinite; }

@keyframes smokeDrift {
    0% { transform: translate(-2%, 0%) scale(1); }
    50% { transform: translate(2%, -2%) scale(1.03); }
    100% { transform: translate(-2%, 0%) scale(1); }
}
@keyframes flashPulse {
    0%, 70% { opacity: 0.05; }
    75% { opacity: 0.25; }
    80% { opacity: 0.05; }
    100% { opacity: 0.08; }
}
@keyframes bombFlash {
    0%, 78% { opacity: 0; transform: scale(0.6); }
    82% { opacity: 0.85; transform: scale(1); }
    88% { opacity: 0.25; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1.6); }
}
@keyframes emberFloat {
    0% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(-8px); opacity: 0.7; }
    100% { transform: translateY(0); opacity: 0.3; }
}
@keyframes alertFlicker {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(255,59,59,0.9); }
    45% { opacity: 0.6; text-shadow: 0 0 4px rgba(255,59,59,0.4); }
    55% { opacity: 1; text-shadow: 0 0 14px rgba(255,59,59,0.9); }
    70% { opacity: 0.8; }
}