/* ============================================================================
   SunZ – Gaming Theme 2026 (overlay)
   ----------------------------------------------------------------------------
   This file is loaded *after* NewStyle30j.css and only adds / overrides the
   bits that bring the post-apocalyptic / DayZ vibe.  Nothing in the legacy
   stylesheet has been removed – we just enhance.
   ============================================================================ */

/* -------------------------------------------------- 1. Extra theme tokens   */
:root{
    --neon-red:        #ff2a2a;
    --neon-orange:     #ff7a18;
    --neon-amber:      #ffb300;
    --neon-toxic:      #b6ff3c;
    --neon-cyan:       #19f0ff;
    --bg-deep:         #07080b;
    --bg-deep-2:       #0d0f14;

    --gradient-danger: linear-gradient(135deg,#ff2a2a 0%,#ff7a18 50%,#ffb300 100%);
    --gradient-toxic:  linear-gradient(135deg,#b6ff3c 0%,#19f0ff 100%);
    --gradient-mesh:
        radial-gradient(1200px 600px at 80% -10%, rgba(255,42,42,.18), transparent 60%),
        radial-gradient(900px 500px at 0% 30%, rgba(0,172,193,.15), transparent 60%),
        radial-gradient(700px 700px at 50% 110%, rgba(255,122,24,.12), transparent 60%);

    --grid-line: rgba(255,255,255,.035);
}

/* -------------------------------------------------- 2. Body atmosphere      */
html, body { background: var(--bg-deep); }

body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none; z-index:0;
    background:
        var(--gradient-mesh),
        linear-gradient(transparent 0 1px, var(--grid-line) 1px 2px),
        linear-gradient(90deg, transparent 0 1px, var(--grid-line) 1px 2px);
    background-size: auto, 100% 38px, 38px 100%;
    mix-blend-mode: screen;
    opacity:.9;
}

/* faint horizontal scanlines on top of everything (CRT vibe) */
body::after{
    content:"";
    position:fixed; inset:0;
    pointer-events:none; z-index:9998;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0 2px,
        rgba(255,255,255,.025) 2px 3px
    );
    mix-blend-mode:overlay;
}

/* keep real content above the atmosphere layers */
.header, section, footer, .particles { position: relative; }

/* -------------------------------------------------- 3. Header polish        */
.header{
    border-bottom: 1px solid rgba(255,42,42,.25);
    background: linear-gradient(180deg, rgba(7,8,11,.96) 0%, rgba(7,8,11,.7) 100%);
}
.header.scrolled{ box-shadow: 0 6px 30px rgba(255,42,42,.18); }
.logo img{
    border-color: var(--neon-red);
    box-shadow: 0 0 18px rgba(255,42,42,.55), inset 0 0 6px rgba(0,0,0,.6);
}

/* -------------------------------------------------- 4. Hero – cinematic     */
.hero{
    position: relative;
    background:
        linear-gradient(180deg, rgba(7,8,11,.5) 0%, rgba(7,8,11,.9) 100%),
        linear-gradient(rgba(10,10,11,.55), rgba(26,26,29,.75)) fixed,
        url('https://sunz.ir/Files/lada.jpg') center center/cover no-repeat fixed;
}
.hero::after{
    content:"";
    position:absolute; inset:0;
    background:
        radial-gradient(60% 80% at 50% 10%, rgba(255,42,42,.18), transparent 70%),
        repeating-linear-gradient( to bottom,
            transparent 0 4px,
            rgba(0,0,0,.18) 4px 5px);
    pointer-events:none;
}
.hero-content{ position: relative; z-index: 2; }

/* live status pill above the title */
.hero-live-badge{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.45rem 1rem;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(182,255,60,.35);
    border-radius: 999px;
    color: var(--neon-toxic);
    font-size:.85rem; font-weight:700; letter-spacing:1px;
    text-transform:uppercase;
    backdrop-filter: blur(8px);
    margin-bottom: 1.25rem;
    box-shadow: 0 0 24px rgba(182,255,60,.18);
}
.hero-live-badge .live-dot{
    width:10px; height:10px; border-radius:50%;
    background: var(--neon-toxic);
    box-shadow: 0 0 0 0 rgba(182,255,60,.6);
    animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse{
    0%   { box-shadow: 0 0 0 0 rgba(182,255,60,.7); }
    70%  { box-shadow: 0 0 0 14px rgba(182,255,60,0); }
    100% { box-shadow: 0 0 0 0 rgba(182,255,60,0); }
}

/* glitch text on the giant SunZ DayZ title */
.hero-logo{
    position: relative;
    background: linear-gradient(135deg,#fff 0%,#ff7a18 45%,#ff2a2a 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    text-shadow: 0 0 30px rgba(255,42,42,.25);
    letter-spacing: 2px;
}
.hero-logo[data-glitch]::before,
.hero-logo[data-glitch]::after{
    content: attr(data-glitch);
    position:absolute; inset:0;
    background: inherit;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events:none;
}
.hero-logo[data-glitch]::before{
    color: var(--neon-cyan);
    animation: glitch-x 3.6s infinite linear alternate-reverse;
    mix-blend-mode: screen;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.hero-logo[data-glitch]::after{
    color: var(--neon-red);
    animation: glitch-y 4.2s infinite linear alternate-reverse;
    mix-blend-mode: screen;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}
@keyframes glitch-x{
    0%,92%,100%{ transform: translate(0,0); }
    93%        { transform: translate(-3px,1px); }
    95%        { transform: translate(2px,-1px); }
    97%        { transform: translate(-2px,2px); }
}
@keyframes glitch-y{
    0%,90%,100%{ transform: translate(0,0); }
    92%        { transform: translate(2px,2px); }
    94%        { transform: translate(-2px,-1px); }
    96%        { transform: translate(1px,-2px); }
}

/* CTA buttons – richer */
.cta-primary{
    background: var(--gradient-danger) !important;
    box-shadow: 0 6px 24px rgba(255,42,42,.35), inset 0 0 16px rgba(255,255,255,.08);
}
.cta-primary:hover{
    background: linear-gradient(135deg,#ffb300,#ff2a2a) !important;
    box-shadow: 0 10px 36px rgba(255,42,42,.55);
}
.cta-secondary{
    border-color: rgba(25,240,255,.5);
    background: rgba(25,240,255,.04);
}
.cta-secondary:hover{
    background: linear-gradient(135deg, rgba(25,240,255,.18), rgba(0,172,193,.18));
    border-color: var(--neon-cyan);
    box-shadow: 0 0 22px rgba(25,240,255,.35);
}

/* -------------------------------------------------- 5. Section titles tag   */
.section-title{ position: relative; }
.section-title::before{
    display:block;
    font-family: 'Courier New', monospace;
    color: rgba(255,42,42,.6);
    letter-spacing: 4px;
    font-size:.8rem;
    margin-bottom:.5rem;
}
.section-title h2::after{
    background: var(--gradient-danger) !important;
    box-shadow: 0 0 12px rgba(255,42,42,.55);
}

/* -------------------------------------------------- 6. Cards – tactical     */
.download-card,.feature-card,.server-card,.stat-item{
    background:
        linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,0)) ,
        var(--dark-card);
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.download-card::after,
.feature-card::before,
.server-card::after,
.stat-item::after{
    /* corner brackets */
    content:"";
    position:absolute;
    inset: 8px;
    border: 1px solid transparent;
    border-image: linear-gradient(135deg, var(--neon-red), transparent 30%, transparent 70%, var(--neon-cyan)) 1;
    pointer-events: none;
    opacity:.55;
    transition: opacity .3s;
}
.download-card:hover::after,
.feature-card:hover::before,
.server-card:hover::after,
.stat-item:hover::after{ opacity: 1; }

.feature-icon{
    background: var(--gradient-danger) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    filter: drop-shadow(0 0 12px rgba(255,42,42,.45));
}

/* server card: live dot */
.server-card .status.online::before{
    content:""; display:inline-block;
    width:8px; height:8px; border-radius:50%;
    background: var(--success);
    margin-left:6px;
    box-shadow: 0 0 0 0 rgba(76,175,80,.6);
    animation: live-pulse 1.6s infinite;
}

/* -------------------------------------------------- 7. Live activity ticker */
.live-ticker{
    display:flex; align-items:center; gap:1rem;
    background: linear-gradient(90deg, rgba(255,42,42,.12), rgba(255,122,24,.06) 60%, transparent);
    border-top: 1px solid rgba(255,42,42,.25);
    border-bottom: 1px solid rgba(255,42,42,.25);
    padding: .65rem 1rem;
    overflow:hidden;
    position: relative;
}
.live-ticker .lt-label{
    flex: 0 0 auto;
    display:inline-flex; align-items:center; gap:.5rem;
    background: var(--gradient-danger);
    color:#0b0b0b; font-weight:800; font-size:.78rem;
    padding:.3rem .8rem; border-radius:6px;
    letter-spacing:2px; text-transform:uppercase;
    white-space: nowrap;
}
.live-ticker .lt-label .live-dot{
    width:8px; height:8px; border-radius:50%;
    background:#0b0b0b; animation: live-pulse 1.4s infinite;
    box-shadow: 0 0 0 0 rgba(0,0,0,.6);
}
.live-ticker .lt-track{
    flex: 1 1 auto;
    overflow:hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.live-ticker .lt-strip{
    display:inline-flex; gap:2.5rem;
    white-space: nowrap;
    animation: lt-marquee 40s linear infinite;
    color: var(--text-secondary); font-size:.95rem;
}
.live-ticker .lt-strip span b{ color: var(--neon-amber); font-weight:700; }
.live-ticker .lt-strip span i.bi{ color: var(--neon-red); margin-left:.4rem; }
@keyframes lt-marquee{
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* -------------------------------------------------- 8. Recent Bans section  */
.recent-bans{
    padding: 6rem 2rem;
    background:
        radial-gradient(800px 400px at 80% 0%, rgba(255,42,42,.10), transparent 60%),
        var(--dark-surface);
    position: relative;
}
.recent-bans::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(255,42,42,.04) 0 12px,
            transparent 12px 24px);
    pointer-events:none;
    mask-image: linear-gradient(180deg, #000, transparent 60%);
}
.recent-bans .container{ position: relative; z-index: 1; }

.bans-toolbar{
    display:flex; align-items:center; justify-content:space-between;
    gap: 1rem; margin-bottom: 2rem; flex-wrap:wrap;
}
.bans-toolbar .bans-meta{
    color: var(--text-muted); font-size:.92rem;
    display:inline-flex; align-items:center; gap:.5rem;
}
.bans-toolbar .bans-meta .live-dot{
    width:9px; height:9px; border-radius:50%;
    background: var(--neon-red);
    box-shadow: 0 0 0 0 rgba(255,42,42,.6);
    animation: live-pulse 1.6s infinite;
}
.bans-toolbar .btn-refresh{
    background: rgba(255,42,42,.08);
    border: 1px solid rgba(255,42,42,.35);
    color: var(--text-primary);
    padding:.55rem 1.1rem; border-radius:10px;
    font-weight:600; cursor:pointer;
    display:inline-flex; align-items:center; gap:.5rem;
    transition: .25s;
}
.bans-toolbar .btn-refresh:hover{
    background: rgba(255,42,42,.18);
    border-color: var(--neon-red);
    box-shadow: 0 0 18px rgba(255,42,42,.35);
}
.bans-toolbar .btn-refresh i{ transition: transform .6s ease; }
.bans-toolbar .btn-refresh.is-loading i{ animation: spin 1s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg); } }

.bans-list{
    display:grid; grid-template-columns: 1fr; gap: .9rem;
}
.ban-row{
    display:grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background:
        linear-gradient(90deg, rgba(255,42,42,.08), transparent 40%),
        var(--dark-card);
    border: 1px solid rgba(255,42,42,.18);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: .3s;
}
.ban-row::before{
    content:"";
    position:absolute; right:0; top:0; bottom:0;
    width: 4px;
    background: var(--gradient-danger);
    box-shadow: 0 0 14px rgba(255,42,42,.6);
}
.ban-row:hover{
    transform: translateY(-3px);
    border-color: var(--neon-red);
    box-shadow: 0 8px 28px rgba(255,42,42,.22);
    background:
        linear-gradient(90deg, rgba(255,42,42,.14), transparent 50%),
        var(--dark-elevated);
}
.ban-avatar{
    width: 56px; height: 56px; border-radius: 12px;
    display:flex; align-items:center; justify-content:center;
    font-weight: 900; font-size: 1.4rem;
    color: #fff;
    background: var(--gradient-danger);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 20px rgba(255,42,42,.35);
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    position: relative;
}
.ban-avatar::after{
    content: "BAN";
    position:absolute;
    bottom: -7px; left: 50%; transform: translateX(-50%);
    font-size: .55rem; font-weight: 800; letter-spacing: 1px;
    background: #0b0b0b; color: var(--neon-red);
    padding: 1px 5px; border-radius: 4px;
    border: 1px solid rgba(255,42,42,.6);
}
.ban-info{ min-width: 0; }
.ban-name{
    display:flex; align-items:center; gap:.6rem;
    font-size: 1.05rem; font-weight: 700;
    color: var(--text-primary);
    /* direction: ltr;*/
}
.ban-meta{
    display:flex; align-items:center; gap: 1rem;
    margin-top: .35rem;
    color: var(--text-secondary);
    font-size:.85rem;
    flex-wrap: wrap;
}
.ban-meta i{ color: var(--neon-orange); margin-left:.2rem; }
.ban-reason{
    display:inline-flex; align-items:center; gap:.35rem;
    color: var(--neon-amber);
    font-weight: 600;
}
.ban-server{ color: var(--text-muted); }
.ban-side{
    text-align: left;
    display:flex; flex-direction:column; align-items:flex-end;
    gap: .35rem;
}
.ban-duration{
    font-size:.72rem; font-weight: 800;
    letter-spacing: 1px;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid rgba(255,42,42,.4);
    color: var(--neon-red);
    background: rgba(255,42,42,.08);
    white-space: nowrap;
    display:inline-flex; align-items:center; gap:.4rem;
}
.ban-duration.is-banned{
    color:#0b0b0b;
    background: var(--gradient-danger);
    border-color: transparent;
    box-shadow: 0 0 14px rgba(255,42,42,.5);
}
.ban-duration.is-unbanned{
    color: var(--neon-toxic);
    background: rgba(182,255,60,.08);
    border-color: rgba(182,255,60,.45);
    box-shadow: 0 0 14px rgba(182,255,60,.18);
}

/* row tints by status */
.ban-row.is-unbanned{
    border-color: rgba(182,255,60,.18);
    background:
        linear-gradient(90deg, rgba(182,255,60,.06), transparent 40%),
        var(--dark-card);
}
.ban-row.is-unbanned::before{
    background: var(--gradient-toxic);
    box-shadow: 0 0 14px rgba(182,255,60,.45);
}
.ban-row.is-unbanned:hover{
    border-color: rgba(182,255,60,.5);
    box-shadow: 0 8px 28px rgba(182,255,60,.18);
}
.ban-row.is-unbanned .ban-avatar{
    background: var(--gradient-toxic);
    color:#0b0b0b;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15), 0 0 20px rgba(182,255,60,.35);
}
.ban-row.is-unbanned .ban-avatar::after{
    content: "FREE";
    color: var(--neon-toxic);
    border-color: rgba(182,255,60,.6);
}

/* steam id pill */
.ban-id{
    font-family: 'Courier New', monospace;
    font-size:.72rem; font-weight: 600;
    color: var(--neon-cyan) !important;
    background: rgba(25,240,255,.08) !important;
    border: 1px solid rgba(25,240,255,.25);
    padding: 2px 8px !important; border-radius: 6px;
    letter-spacing: .5px;
}

/* unban inline label inside ban-meta */
.ban-unban-time{
    display:inline-flex; align-items:center; gap:.35rem;
    color: var(--neon-toxic);
    font-weight: 600; font-size:.85rem;
}
.ban-unban-time i{ color: var(--neon-toxic); margin-left: .2rem; }

/* ban time on the side */
.ban-time{
    display:inline-flex; align-items:center; gap:.35rem;
    font-family: 'Courier New', monospace;
    font-size:.82rem;
    color: var(--text-muted);
}
.ban-time i{ color: var(--neon-orange); margin-left:.2rem; }

/* skeleton loaders */
.ban-row.skeleton{
    border-color: rgba(255,255,255,.08);
    background: var(--dark-card);
}
.ban-row.skeleton::before{ background: rgba(255,255,255,.08); box-shadow:none; }
.skeleton .skel-bar{
    background: linear-gradient(90deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.10) 50%,
        rgba(255,255,255,.04) 100%);
    background-size: 200% 100%;
    animation: skel 1.4s linear infinite;
    border-radius: 6px;
}
@keyframes skel{
    from{ background-position: 200% 0; }
    to  { background-position: -200% 0; }
}

.bans-empty,
.bans-error{
    text-align:center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    border: 1px dashed rgba(255,255,255,.12);
    border-radius: 14px;
}
.bans-error{
    color: var(--neon-red);
    border-color: rgba(255,42,42,.4);
    background: rgba(255,42,42,.05);
}

/* footer note */
.bans-footnote{
    margin-top: 1.5rem; text-align:center;
    color: var(--text-muted); font-size: .82rem;
}
.bans-footnote code{
    background: rgba(255,255,255,.05); padding: 2px 6px;
    border-radius: 4px; color: var(--neon-cyan);
}

/* -------------------------------------------------- 9. Mobile niceties     */
@media (max-width: 640px){
    .ban-row{
        grid-template-columns: 48px 1fr;
        grid-template-rows: auto auto;
    }
    .ban-avatar{ width: 48px; height: 48px; font-size:1.1rem; }
    .ban-side{
        grid-column: 1 / -1;
        flex-direction: row; justify-content: space-between;
        align-items: center;
    }
    .live-ticker .lt-label{ font-size: .68rem; padding:.25rem .55rem; }
}

/* -------------------------------------------------- 10. Reduced motion      */
@media (prefers-reduced-motion: reduce){
    .hero-logo[data-glitch]::before,
    .hero-logo[data-glitch]::after,
    .live-ticker .lt-strip,
    .live-pulse,
    .skeleton .skel-bar{
        animation: none !important;
    }
}

/* -------------------------------------------------- 11. Hero sub / tagline   */
.hero-logo{
    font-size: clamp(2.6rem, 7vw, 5.2rem);
    line-height: 1.05;
    margin: 0 0 .4rem;
}
.hero-logo-sub{
    font-size: clamp(1.4rem, 3.6vw, 2.4rem) !important;
    letter-spacing: 1px;
    margin-bottom: .6rem;
}
.hero-tagline{
    display:inline-block;
    font-size: clamp(.95rem, 2.4vw, 1.2rem);
    font-weight: 700;
    color: var(--neon-amber);
    letter-spacing: 1px;
    padding: .35rem 1.1rem;
    margin: 0 0 1.4rem;
    border: 1px solid rgba(255,179,0,.35);
    border-radius: 999px;
    background: rgba(255,179,0,.06);
    text-shadow: 0 0 18px rgba(255,179,0,.3);
}

/* -------------------------------------------------- 12. User badges (nav)    */
/* Moved to sunz-tokens.css so badges style correctly on every page, not just
   the homepage. Kept here as a reference marker only. */