:root{
  --bg:#02070d;
  --line:#0cbcff;
  --text:#f4f8ff;
  --muted:#9db7c9;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}
.site-header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:50;
  background:linear-gradient(
    180deg,
    rgba(1,7,13,.78) 0%,
    rgba(1,7,13,.62) 72%,
    rgba(1,7,13,.48) 100%
  );
  border-bottom:1px solid rgba(12,188,255,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)
}
.header-inner{
  width:min(1500px,calc(100% - 36px));height:82px;margin:auto;
  display:grid;grid-template-columns:150px minmax(650px,1fr) 250px;
  align-items:center;gap:24px
}
.brand{height:82px;display:flex;align-items:center;text-decoration:none;overflow:visible;position:relative;z-index:60}
.brand img{position:absolute;left:70px;top:10px;display:block;width:165px;max-width:none;max-height:none;height:auto;object-fit:contain;filter:drop-shadow(0 0 12px rgba(0,174,255,.34))}
.brand-fallback{display:none;color:white;font-size:28px;font-weight:900;letter-spacing:3px}
.main-nav{height:100%;display:flex;align-items:center;justify-content:center;gap:36px;white-space:nowrap}
.main-nav a{height:100%;display:flex;align-items:center;position:relative;color:#fff;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:1.1px;padding-top:8px}
.main-nav a:hover,.main-nav a.active{color:#23c8ff}
.main-nav a.active:after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:3px;background:#13bfff;box-shadow:0 0 12px #13bfff}
.account-area{display:flex;justify-content:flex-end;min-width:0}
.steam-login{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  text-decoration:none;
  overflow:visible;
}
.steam-login img{
  display:block;
  width:180px;
  height:auto;
  object-fit:contain;
  transform:translate(-130px, 8px);
  transition:transform .18s ease,filter .18s ease;
}
.steam-login:hover{
  border:0;
  box-shadow:none;
}
.steam-login:hover img{
  transform:translate(-130px, 8px) scale(1.03);
  filter:brightness(1.1) drop-shadow(0 0 8px rgba(35,200,255,.45));
}
.steam-user{display:flex;align-items:center;gap:9px;min-width:0;font-size:12px;font-weight:800}
.steam-user img{width:38px;height:38px;border-radius:4px;border:1px solid #1ec5ff}
.steam-user span{max-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout{color:#7ddcff;font-size:10px;text-decoration:none}


/* =========================================================
   AUTOMATIC WIPE ALERT TICKER
   ========================================================= */
.wipe-alert-bar{
  position:absolute;
  top:282px;
  left:0;
  width:100%;
  height:38px;
  z-index:45;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(72,5,10,.72),rgba(34,2,7,.66));
  border-top:1px solid rgba(255,67,76,.35);
  border-bottom:1px solid rgba(255,67,76,.58);
  box-shadow:0 5px 18px rgba(0,0,0,.24),inset 0 0 18px rgba(255,25,40,.05);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.wipe-alert-track{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  display:flex;
  align-items:center;
  white-space:nowrap;
  animation:wipe-alert-scroll 18s linear infinite;
  will-change:transform;
}
.wipe-alert-message{
  display:inline-block;
  color:#ff6a70;
  font-size:12px;
  line-height:38px;
  font-weight:850;
  letter-spacing:2.1px;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(255,37,52,.48);
}
.wipe-alert-message strong{
  color:#fff;
  font-weight:950;
  text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(255,70,80,.55);
}
.wipe-alert-icon{
  display:inline-block;
  font-size:24px;
  line-height:1;
  vertical-align:-3px;
  margin-right:7px;
}
@keyframes wipe-alert-scroll{
  from{transform:translateX(-100%)}
  to{transform:translateX(100vw)}
}

main{min-height:100vh;background:#02070d}
.home-hero{
  position:relative;
  min-height:100vh;
  height:clamp(720px,100vh,1000px);
  background:
    linear-gradient(180deg,rgba(0,5,12,.10) 0%,rgba(0,5,12,.02) 58%,rgba(0,5,12,.72) 100%),
    url("../img/axis-home-bg.png?v=2") center center/cover no-repeat;
  overflow:hidden;
  border-bottom:1px solid rgba(12,188,255,.45)
}
.hero-content{
  position:absolute;z-index:3;left:50%;top:49%;
  transform:translate(-50%,-50%);
  width:min(720px,88vw);text-align:center;
  text-shadow:0 3px 12px #000,0 0 24px rgba(0,0,0,.9)
}

.first-wipe-announcement{
  position:absolute;
  z-index:4;
  left:50%;
  top:19%;
  transform:translateX(-50%);
  width:min(760px,88vw);
  text-align:center;
  color:#fff;
  text-shadow:0 2px 10px #000,0 0 18px rgba(0,0,0,.85);
  line-height:1.45;
}
.first-wipe-announcement strong,
.first-wipe-announcement span{
  display:block;
}
.first-wipe-announcement strong{
  color:#25c8ff;
  font-size:18px;
  letter-spacing:1.4px;
  margin-bottom:4px;
}
.first-wipe-announcement span{
  font-size:14px;
  font-weight:700;
}
.hero-logo{
  width:min(430px,58vw);max-height:310px;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.9));
  margin-bottom:4px
}
.hero-kicker{margin:0 0 10px;color:#d8edff;font-size:15px;font-weight:900;letter-spacing:4px}
.hero-content h1{margin:0;color:#fff;font-size:clamp(28px,3.1vw,54px);line-height:1.02;letter-spacing:2px;font-weight:900}
.hero-content h1 span{color:#25c8ff;text-shadow:0 0 15px rgba(20,190,255,.65),0 3px 12px #000}
.hero-actions{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:14px;
  margin-top:24px;
}

.hero-image-button{
  display:block;
  width:360px;
  flex:0 0 360px;
  text-decoration:none;
  transition:transform .18s ease,filter .18s ease;
}

.hero-image-button img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.42));
}

.hero-image-button:hover{
  transform:translateY(-3px) scale(1.02);
  filter:brightness(1.10);
}

.axis-button{
  min-width:150px;
  text-align:center;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,rgba(5,76,122,.96),rgba(3,34,60,.97));
  border:1px solid #14bfff;
  padding:14px 20px;
  font-weight:900;
  font-size:12px;
  letter-spacing:1px;
  box-shadow:inset 0 0 12px rgba(0,170,255,.18),0 0 8px rgba(0,183,255,.2);
}
.axis-button:hover{
  background:linear-gradient(180deg,#087dbb,#03466f);
  box-shadow:0 0 18px rgba(0,194,255,.48);
}
.join-war{
  position:absolute;z-index:4;left:50%;bottom:155px;transform:translateX(-50%);
  color:#fff;text-decoration:none;font-weight:900;font-size:17px;letter-spacing:6px;
  padding:12px 32px;border-bottom:1px solid rgba(25,190,255,.8);
  text-shadow:0 0 12px rgba(40,190,255,.7)
}
.join-war:hover{color:#39cfff}

/* =========================================================
   HOME FEATURE STRIP
   ========================================================= */
.home-features{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,rgba(3,14,23,.98),rgba(1,7,13,.99));
  border-top:1px solid rgba(30,190,255,.55);
  border-bottom:1px solid rgba(30,190,255,.18);
  box-shadow:inset 0 12px 24px rgba(0,0,0,.28),0 -8px 24px rgba(0,0,0,.22);
}

.home-feature{
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:18px 22px;
  border-right:1px solid rgba(30,150,205,.22);
}

.home-feature:last-child{border-right:0}

.home-feature .fi{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  min-width:42px;
  color:#27c8ff;
  font-size:30px;
  filter:drop-shadow(0 0 8px rgba(39,200,255,.45));
}

.home-feature strong{
  display:block;
  color:#f4f8ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.1px;
  white-space:nowrap;
}

.home-feature small{
  display:block;
  margin-top:5px;
  color:#91aabd;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  white-space:nowrap;
}

.steam-user .steam-id {
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.site-footer{border-top:1px solid rgba(25,187,255,.25);background:#01060b;color:#8aa1b3;text-align:center;padding:18px;font-size:11px;letter-spacing:1.1px}
.site-footer span{margin:0 9px;color:#1abfff}

@media(max-width:1180px){
 .header-inner{grid-template-columns:115px 1fr 205px;gap:14px}
 .main-nav{gap:19px}.main-nav a{font-size:11px}.brand img{width:132px}
 .steam-login img{width:190px}
}
@media(max-width:900px){
 .home-features{grid-template-columns:1fr 1fr}
 .site-header{
   position:relative;
   background:rgba(1,7,13,.94);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px)
 }
 .wipe-alert-bar{position:relative;top:auto;height:36px}\n .wipe-alert-message{font-size:10px;line-height:36px;letter-spacing:1.4px}\n .header-inner{height:auto;min-height:82px;grid-template-columns:100px 1fr;grid-template-areas:"brand account" "nav nav";padding:7px 0 0}
 .brand{grid-area:brand}.brand img{position:static;width:108px;max-width:108px}.account-area{grid-area:account}
 .main-nav{grid-area:nav;justify-content:flex-start;overflow-x:auto;height:46px;padding:0 2px;gap:25px}
 .main-nav a{height:46px}
 .home-hero{height:760px;min-height:760px;background-position:center center}
 .hero-content{top:52%}.hero-logo{width:min(380px,72vw)}
 .first-wipe-announcement{top:21%;width:min(720px,90vw)}
}
@media(max-width:600px){
 .home-feature{min-height:76px;padding:12px 8px}
 .home-feature .fi{width:32px;min-width:32px;font-size:22px}
 .home-feature strong{font-size:10px}
 .home-feature small{font-size:8px}
 .header-inner{width:calc(100% - 20px)}.brand img{width:90px;max-width:90px}.steam-login img{width:165px}
 .home-hero{height:680px;min-height:680px}
 .hero-content{top:52%}.hero-kicker{font-size:10px;letter-spacing:2px}
 .first-wipe-announcement{top:22%;width:92vw}.first-wipe-announcement strong{font-size:13px}.first-wipe-announcement span{font-size:10px}
 .hero-actions{gap:8px}.hero-image-button{width:min(360px,42vw);flex:0 0 min(360px,42vw)}.axis-button{min-width:115px;padding:11px 10px;font-size:10px}
 .join-war{bottom:22px;font-size:12px;letter-spacing:3px;padding:10px 15px}
}