/* ZWorld — Nightfall Protocol: readable zombie-apocalypse interface. */
:root { --zw-ink:#101311; --zw-panel:#171c19; --zw-panel-raised:#202722; --zw-line:rgba(205,215,190,.16); --zw-mist:#dfe5d8; --zw-muted:#aeb8aa; --zw-olive:#a8b56a; --zw-olive-dark:#687241; --zw-rust:#b56a3a; --zw-danger:#b7443d; }

/* Bootstrap normally adds this overlay behind confirmation dialogs. ZWorld keeps dialogs clear. */
.modal-backdrop,
.modal-backdrop.show {
  display: none !important;
  opacity: 0 !important;
}

/* Atmosphere stays behind the UI: no particles, flash, glitch or animation. */
#app { position:relative; color:var(--zw-mist); font-family:"Nunito",sans-serif; animation:none !important; }
#app::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035; background:url("../img/zworld/cracks.svg") repeat; background-size:720px; }
#app::after, body::after { content:none !important; display:none !important; }
#content { position:relative; background:#0d100e !important; }
#content::before { content:""; position:sticky; top:0; display:block; height:3px; z-index:20; background:linear-gradient(90deg,var(--zw-rust),var(--zw-olive) 42%,transparent 78%); box-shadow:none !important; }
#content .content-wrapper { position:relative; z-index:1; background:linear-gradient(180deg,rgba(13,16,14,.89),rgba(13,16,14,.97)),var(--settings-background) !important; background-attachment:fixed; background-size:cover; }

/* Survival broadcast: the only continuous motion, deliberately slow and discreet. */
#zw-broadcast { display:flex; align-items:center; gap:14px; min-height:34px; padding-right:18px; overflow:hidden; color:var(--zw-mist); background:#141914; border-bottom:1px solid var(--zw-line); white-space:nowrap; }
#zw-broadcast .zw-live { display:inline-flex; flex:0 0 auto; align-items:center; gap:7px; align-self:stretch; padding:0 15px; color:#fff; background:var(--zw-rust); font-family:"Oswald",sans-serif; font-size:.76rem; font-weight:700; letter-spacing:.09em; }
#zw-broadcast .zw-live::before { content:""; width:7px; height:7px; border-radius:50%; background:#f6e4d8; box-shadow:0 0 0 3px rgba(255,255,255,.1); }
#zw-broadcast .zw-track-wrap { flex:1; overflow:hidden; }
#zw-broadcast .zw-track { display:inline-flex; gap:72px; align-items:center; min-width:max-content; color:#c7d0c3; font-size:.78rem; font-weight:700; letter-spacing:.07em; animation:zw-broadcast-scroll 42s linear infinite; }
#zw-broadcast .zw-track i { margin-right:8px; color:var(--zw-olive); }
@keyframes zw-broadcast-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Navigation reads as a sober command-post panel. */
#sidebar { background:#111512 !important; border-right:1px solid var(--zw-line) !important; box-shadow:12px 0 30px rgba(0,0,0,.22) !important; animation:none !important; }
#sidebar::before { content:""; display:block; height:3px; background:var(--zw-rust) !important; opacity:1; }
#sidebar .sidebar-start img { filter:none !important; }
#sidebar .sidebar-link { color:var(--zw-muted) !important; text-shadow:none !important; }
#sidebar .sidebar-link.active, #sidebar .sidebar-link:hover { color:var(--zw-mist) !important; background:rgba(168,181,106,.1) !important; text-shadow:none !important; }
#sidebar .sidebar-link.active::before { width:3px; background:var(--zw-olive) !important; box-shadow:none !important; }
#sidebar .sidebar-start::before, #sidebar .sidebar-start::after { content:none !important; animation:none !important; }

/* Shared high-contrast surfaces. */
.card,.modal-content,.dropdown-menu,.server-card { background:rgba(23,28,25,.96) !important; border:1px solid var(--zw-line) !important; border-radius:10px !important; box-shadow:0 12px 30px rgba(0,0,0,.2) !important; clip-path:none !important; }
.post { border:1px solid var(--zw-line) !important; border-radius:10px !important; box-shadow:0 12px 30px rgba(0,0,0,.2) !important; clip-path:none !important; }
.card::before,.card::after,.server-card::after { content:none !important; display:none !important; }
.card .card-header { color:var(--zw-mist); background:rgba(255,255,255,.025); border-bottom:1px solid var(--zw-line) !important; font-family:"Oswald",sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.card .card-header::after,.card > .card-header:first-child::before,.card > .card-body:first-child::before { content:none !important; }

/* Type hierarchy remains clear on every background. */
h1,h2,h3,h4,h5,h6,.section-title,.post .content .title,.server-name { color:var(--zw-mist) !important; font-family:"Oswald",sans-serif; text-shadow:none !important; }
.section-title { position:relative; padding-bottom:11px; border-bottom:1px solid var(--zw-line) !important; }
.section-title::before { content:""; position:absolute; bottom:-1px; left:0; width:64px; height:2px; background:var(--zw-rust); opacity:1; }
.section-title:hover,.server-name:hover,.post .content .title:hover { animation:none !important; }
p,.text-muted,.post .content,.table { color:var(--zw-muted) !important; }
a[href]:not(.btn) { color:var(--zw-olive) !important; }
a[href]:not(.btn):hover { color:#d4dea2 !important; }

/* Strong actions without neon or aggressive motion. */
.btn { border-radius:7px !important; clip-path:none !important; font-weight:700; letter-spacing:.02em; text-transform:none; transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease; }
.btn.btn-gradient,.btn.btn-primary,.btn.btn-gradient-2 { background:var(--zw-olive-dark) !important; border:1px solid #8e9b58 !important; color:#fff !important; box-shadow:none !important; animation:none !important; cursor:pointer !important; }
.btn.btn-gradient::before,.btn.btn-primary::before,.btn.btn-gradient-2::before,#homebanner .hommebanner-content .btn-ip::after { content:none !important; }
.btn.btn-gradient:hover,.btn.btn-primary:hover,.btn.btn-gradient-2:hover { background:#7e8a4e !important; box-shadow:none !important; transform:translateY(-1px); }
.btn-outline-primary { color:var(--zw-olive) !important; border-color:var(--zw-olive-dark) !important; }
.btn-outline-primary:hover { background:rgba(168,181,106,.15) !important; }
.btn-danger,.btn.btn-danger,.badge.bg-danger { background:var(--zw-danger) !important; border-color:var(--zw-danger) !important; box-shadow:none !important; animation:none !important; }

/* Forms are calm field equipment, with a visible keyboard focus. */
.form-control,.form-select,.dselect-wrapper .form-select { color:var(--zw-mist) !important; background:#111512 !important; border:1px solid rgba(205,215,190,.25) !important; border-left:3px solid var(--zw-olive-dark) !important; font-family:"Nunito",sans-serif !important; font-size:1rem !important; }
.form-control:focus,.form-select:focus { border-color:var(--zw-olive) !important; box-shadow:0 0 0 .2rem rgba(168,181,106,.16) !important; }

/* Hero: the narrative image stays legible at every viewport. */
#homebanner { overflow:hidden; border:1px solid rgba(205,215,190,.18) !important; border-radius:12px !important; box-shadow:0 18px 44px rgba(0,0,0,.3) !important; }
#homebanner::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(10,13,11,.94),rgba(10,13,11,.78) 52%,rgba(10,13,11,.34)); animation:none !important; }
#homebanner::after { content:""; position:absolute; right:42px; bottom:28px; width:118px; height:118px; pointer-events:none; opacity:.1; background:url("../img/zworld/biohazard.svg") center/contain no-repeat; filter:grayscale(1) sepia(.3); transition:opacity .5s ease,transform .7s ease; }
#homebanner:hover::after { opacity:.2; transform:rotate(8deg) scale(1.06); }
#homebanner .hommebanner-content::after { content:none !important; display:none !important; animation:none !important; }
#homebanner .hommebanner-content { position:relative; z-index:1; padding:72px 54px; }
#homebanner .hommebanner-content::before { content:none !important; }
#homebanner .hommebanner-content .title { max-width:660px; color:#f4f6ef !important; font-family:"Oswald",sans-serif !important; font-size:clamp(2rem,4vw,3.6rem); font-weight:700; line-height:1.08; letter-spacing:.015em; text-transform:uppercase; -webkit-text-fill-color:currentColor; background:none; filter:none !important; animation:none !important; }
#homebanner .hommebanner-content .title::after { content:none !important; }
#homebanner .hommebanner-content .title-mini { color:var(--zw-olive) !important; font-family:"Nunito",sans-serif; font-size:.8rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
#homebanner .hommebanner-content .description { max-width:600px; max-height:none; padding-left:15px; color:#d2d9cf !important; border-left:3px solid var(--zw-rust) !important; font-size:1rem; line-height:1.65; }
#homebanner .playerlist { color:#e9ede5 !important; }
#homebanner .playerlist .online,#homebanner .playerlist .offline { animation:none !important; box-shadow:none !important; }
#homebanner .playerlist .online { background:#89a35a; }

/* A single fixed quarantine cue keeps the world-building restrained. */
#footer,#bigfooter { border-top:1px solid var(--zw-line) !important; }
#footer::before,#bigfooter::before { height:3px !important; background:linear-gradient(90deg,var(--zw-rust),transparent 45%) !important; opacity:.9; }
.post .content { background:transparent !important; border:0 !important; }
.date-wrapper .date .value { color:var(--zw-mist) !important; background:rgba(181,106,58,.16) !important; font-family:"Nunito",sans-serif !important; }
@media (max-width:768px) { #zw-broadcast { padding-right:10px; } #zw-broadcast .zw-live { padding:0 11px; } #homebanner .hommebanner-content { padding:46px 28px; } #homebanner::before { background:rgba(10,13,11,.86); } #homebanner::after { right:16px; bottom:16px; width:76px; height:76px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
