*{box-sizing:border-box}html,body{margin:0;padding:0;background:#050a12;color:#eee;font-family:Arial,Helvetica,sans-serif}body{background:radial-gradient(circle at 15% 20%,rgba(255,80,0,.22),transparent 30%),radial-gradient(circle at 85% 20%,rgba(0,100,255,.2),transparent 30%),linear-gradient(#070b14,#050812 70%,#0b0f19);min-height:100vh}.topbar{height:30px;display:flex;justify-content:space-between;align-items:center;padding:0 4%;font-size:12px;background:#070c14;border-bottom:1px solid #1e3550;color:#cdd8e8}.dot{color:#17df48}.social{color:#d8e0eb}.header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:220px 1fr 220px;gap:12px;align-items:center;padding:7px 4%;background:linear-gradient(180deg,#0b1727ee,#06101cee);border-bottom:1px solid #8a5b19;box-shadow:0 5px 20px #000}.brand{position:relative;display:block;text-decoration:none;color:#ffd777;height:62px;overflow:hidden}.brand img{position:absolute;width:145px;height:62px;object-fit:cover;left:0;top:0;opacity:.95;mix-blend-mode:screen}.brand span{position:absolute;left:22px;top:9px;font-family:Georgia,serif;font-size:29px;font-weight:bold;text-shadow:0 0 8px #ff8c00}.brand small{position:absolute;left:30px;top:43px;font-size:9px;color:#fff}.header nav{display:flex;justify-content:center;gap:2px}.header nav a,.auth a{color:#fff;text-decoration:none;padding:14px 16px;font-weight:bold;font-size:13px;border:1px solid #1d2e43;background:#07111e;transition:.2s}.header nav a:hover,.header nav .active,.auth a:hover{background:linear-gradient(#9a2c09,#ff6b12);box-shadow:0 0 18px #ff5b0a}.auth{display:flex;justify-content:flex-end}.auth a{padding:12px 17px}.auth .hot{background:linear-gradient(#8f2109,#ff6b12)}.menu-toggle{display:none}.hero{max-width:1450px;margin:auto;position:relative;min-height:360px;background-image:linear-gradient(90deg,rgba(3,7,12,.1),rgba(3,7,12,.05)),url('../images/asgard_hero_art.jpg');background-size:cover;background-position:center;border-bottom:1px solid #d47a20}.hero-content{min-height:360px;display:flex;align-items:center;justify-content:center;text-align:center}.hero h1{font-family:Georgia,serif;font-size:68px;margin:0;text-shadow:0 0 18px #ff6a00,0 4px 0 #321800;color:#ffd67b}.hero p{font-family:Georgia,serif;font-size:22px;color:#ffe9b0;font-style:italic}.features{max-width:1250px;margin:-1px auto 15px;display:grid;grid-template-columns:repeat(9,1fr);background:linear-gradient(180deg,#07182b,#0a111d);border:1px solid #9a6b27;box-shadow:0 0 0 1px #1b2e44,0 8px 20px #000}.feature{min-height:90px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-right:1px solid #243a54;padding:8px;color:#f4f5f6}.feature .ico{font-size:30px;color:#ff9d22;margin-bottom:5px}.feature span{font-size:12px}.cta{display:flex;justify-content:center;gap:35px;margin:14px auto 20px}.btn{display:inline-block;text-decoration:none;color:#fff;font-family:Georgia,serif;font-weight:bold;font-size:19px;padding:15px 70px;border:1px solid #ffb238;background:linear-gradient(#b52c0b,#ff5d10 55%,#8b1f07);box-shadow:0 0 18px rgba(255,85,0,.35),inset 0 0 8px #ffd16b}.btn.blue{background:linear-gradient(#124c98,#087cff 55%,#0d3d82);border-color:#7dc2ff}.grid3{max-width:1250px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:14px}.panel{background:linear-gradient(180deg,#08182b,#07101c);border:1px solid #7b5b2a;box-shadow:0 0 0 1px #1b2d40,0 8px 20px #000;padding:15px;min-height:180px}.panel h2{font-family:Georgia,serif;color:#ffe18a;text-align:center;font-size:19px;margin:0 0 12px;border-bottom:1px solid #563c1b;padding-bottom:10px}.online{text-align:center}.online .num{font-size:64px;color:#ffe46b;font-weight:bold;text-shadow:0 0 14px #ff4e00}.online .sub{font-size:14px}.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:15px;border-top:1px solid #20364d}.stats div{text-align:center;padding:8px;border-right:1px solid #20364d;font-size:11px}.stats b{display:block;font-size:16px;color:#fff}.welcome{text-align:center;line-height:1.6}.slogan{margin-top:15px;border:1px solid #a66c23;padding:10px;color:#ffd86d;font-weight:bold}.rank table{width:100%;border-collapse:collapse;font-size:12px}.rank th,.rank td{padding:8px;border-bottom:1px solid #1d3249;text-align:left}.rank th{color:#ffdb7c}.section{max-width:1250px;margin:15px auto}.section-title{text-align:center;font-family:Georgia,serif;color:#ffe18a;font-size:19px;margin:8px}.heroes{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.hero-card{position:relative;height:90px;overflow:hidden;border:1px solid #805c27}.hero-card img{width:100%;height:100%;object-fit:cover}.hero-card span{position:absolute;left:0;right:0;bottom:0;padding:7px 4px;text-align:center;background:linear-gradient(transparent,#02060ce8);font-family:Georgia,serif;font-weight:bold;color:#ffd870;font-size:12px}.bottom-grid{display:grid;grid-template-columns:1.1fr 1.2fr 1.1fr;gap:14px}.news-row,.event-row,.status-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #20364d;font-size:12px}.badge{background:#e62d21;padding:3px 7px;border-radius:3px}.status-ok{color:#21ea53}.side{max-width:1250px;margin:15px auto;display:grid;grid-template-columns:2fr 1fr;gap:14px}.quick a{display:block;padding:10px;border-bottom:1px solid #20364d;color:#fff;text-decoration:none}.quick a:hover{color:#ffcf66}.form-wrap{max-width:650px;margin:40px auto}.form{background:#081522;border:1px solid #a06a22;padding:25px;box-shadow:0 15px 30px #000}.form h1{color:#ffd777;font-family:Georgia,serif}.field{margin:12px 0}.field label{display:block;font-size:12px;color:#cbd7e6;margin-bottom:5px}.field input,.field textarea,.field select{width:100%;padding:12px;background:#040b14;border:1px solid #2a4866;color:#fff}.message{padding:10px;margin-bottom:15px;border:1px solid #a06a22;background:#25160a}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.card{background:#081522;border:1px solid #765723;padding:20px}.card h3{color:#ffd777}.to-top{position:fixed;right:20px;bottom:20px;border:0;border-radius:50%;width:44px;height:44px;background:#e22b16;color:#fff;font-size:22px;cursor:pointer}footer{padding:25px 5%;text-align:center;border-top:1px solid #263b50;margin-top:30px;color:#8291a4;font-size:12px}footer span{float:right}@media(max-width:1000px){.header{grid-template-columns:1fr auto}.header nav{display:none;position:absolute;left:0;right:0;top:77px;background:#07111e;flex-direction:column}.header nav.show{display:flex}.menu-toggle{display:block;background:#07111e;color:#fff;border:1px solid #765723;padding:10px}.auth{display:none}.features{grid-template-columns:repeat(3,1fr)}.grid3,.bottom-grid,.side{grid-template-columns:1fr}.heroes{grid-template-columns:repeat(4,1fr)}.hero{min-height:300px}.hero-content{min-height:300px}.hero h1{font-size:45px}.cta{gap:10px}.btn{padding:13px 35px}}@media(max-width:600px){.topbar{font-size:9px}.brand{height:55px}.brand span{font-size:24px;left:12px}.brand small{left:20px}.features{grid-template-columns:repeat(3,1fr)}.feature{min-height:82px}.feature .ico{font-size:22px}.feature span{font-size:10px}.hero{min-height:260px;background-position:center}.hero-content{min-height:260px}.hero h1{font-size:34px}.hero p{font-size:15px}.cta{flex-direction:column;padding:0 20px}.btn{text-align:center}.heroes{grid-template-columns:repeat(2,1fr)}.cards{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}footer span{float:none;display:block;margin-top:8px}}

.online-pill{display:inline-block;margin-bottom:18px;padding:7px 18px;border:1px solid #8d6b31;border-radius:18px;background:rgba(3,9,16,.72);color:#baffbd;font-size:13px;font-weight:bold;box-shadow:0 0 12px rgba(0,0,0,.5)}
.hero-actions{display:flex;justify-content:center;gap:12px;margin-top:15px}
.hero-actions .btn{padding:11px 30px;font-size:15px}
@media(max-width:600px){.hero-actions{flex-direction:column;align-items:center}.hero-actions .btn{width:190px}}

.snow-layer{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:9999}
.snowflake{position:absolute;top:-12px;display:block;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 0 5px rgba(255,255,255,.75);animation-name:snowFall;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes snowFall{0%{transform:translate3d(0,-15px,0) rotate(0deg)}25%{transform:translate3d(calc(var(--drift)*.35),27vh,0) rotate(90deg)}50%{transform:translate3d(calc(var(--drift)*-.15),54vh,0) rotate(180deg)}75%{transform:translate3d(calc(var(--drift)*.65),78vh,0) rotate(270deg)}100%{transform:translate3d(var(--drift),110vh,0) rotate(360deg)}}


/* === Asgard TV-style animated Arabic announcement bar === */
.announcement-bar{
  position:relative;
  z-index:50;
  width:100%;
  height:46px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(90deg,#07090d,#17110b 50%,#07090d);
  border-top:1px solid rgba(255,184,64,.75);
  border-bottom:1px solid rgba(255,135,24,.95);
  box-shadow:0 3px 14px rgba(0,0,0,.75), inset 0 0 18px rgba(255,150,30,.13);
}
.announcement-badge{
  flex:0 0 92px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  direction:rtl;
  color:#fff;
  font:800 13px Tahoma,Arial,sans-serif;
  background:linear-gradient(180deg,#b7350e,#ff7117,#8f2109);
  border-right:1px solid #ffc45c;
  text-shadow:0 1px 3px #000;
}
.announcement-window{
  position:relative;
  flex:1 1 auto;
  height:100%;
  overflow:hidden;
  direction:ltr;
}
.announcement-marquee{
  position:absolute;
  top:50%;
  left:0;
  display:flex;
  width:max-content;
  white-space:nowrap;
  direction:ltr;
  transform:translate3d(100vw,-50%,0);
  animation:asgardAnnouncementMove 9s linear infinite, asgardAnnouncementColor 2s linear infinite;
  will-change:transform,color;
}
.announcement-marquee span{
  display:block;
  padding-right:90px;
  direction:rtl;
  color:#fff2a8;
  font:800 17px Tahoma,Arial,sans-serif;
  line-height:46px;
  text-shadow:0 0 8px currentColor,0 1px 3px #000;
}
@keyframes asgardAnnouncementMove{
  from{transform:translate3d(100vw,-50%,0)}
  to{transform:translate3d(-50%,-50%,0)}
}
@keyframes asgardAnnouncementColor{
  0%{color:#fff2a8}
  20%{color:#ffd166}
  40%{color:#ff7a59}
  60%{color:#62d9ff}
  80%{color:#c9a7ff}
  100%{color:#fff2a8}
}
.announcement-marquee:hover{animation-play-state:paused}
@media(max-width:700px){
  .announcement-bar{height:42px}
  .announcement-badge{flex-basis:72px;font-size:11px}
  .announcement-marquee span{font-size:14px;line-height:42px;padding-right:65px}
  .announcement-marquee{animation-duration:8s,1.8s}
}