/* ==========================================================================
   ستايل موحد لكل صفحات الموقع (اللاعبين + الأدمن)
   الخلفية بتتحمّل من هنا بس عن طريق --bg-img (بيتحدد في header.php بمسار صح)
   ========================================================================== */
:root{
  --bg:#06080e; --panel:rgba(13,19,32,.94); --panel-2:rgba(8,12,20,.96);
  --line:rgba(212,175,55,.22); --line-soft:rgba(255,255,255,.07);
  --gold:#d4af37; --gold-2:#fde047; --blue:#38bdf8;
  --text:#e5e7eb; --muted:#94a3b8; --ok:#4ade80; --bad:#f87171; --warn:#fbbf24;
  --r-card:14px; --r-btn:8px;
  --font:'Tajawal','Segoe UI','Noto Sans JP','Noto Sans SC','Hiragino Sans','Microsoft YaHei',system-ui,sans-serif;
  --font-display:'Cinzel','Tajawal',serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--text);
  font:16px/1.7 var(--font); position:relative;
}
/* طبقة الخلفية: صورة العالم + تعتيم (ثابتة ومش بتتأثر بأي ستايل تاني) */
body::before{
  content:""; position:fixed; top:0; right:0; bottom:0; left:0; z-index:-2;
  background:linear-gradient(rgba(12,16,29,.85),rgba(5,7,11,.92)), var(--bg-img) center center / cover no-repeat;
}
#bg-sparks-canvas{position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; pointer-events:none}
main{flex:1; padding-block:32px; position:relative; z-index:1}
.wrap{width:min(1120px,100% - 32px); margin-inline:auto}
a{color:var(--gold-2)}
a:hover{color:#fff}
h1,h2,h3,h4{margin:0 0 12px; line-height:1.3}
h2{font-size:26px; color:var(--gold-2)}
h3{font-size:19px; color:#fff}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}
:focus-visible{outline:2px solid var(--gold-2); outline-offset:2px}
[hidden]{display:none !important}

/* ---------- الشريط العلوي ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,rgba(8,12,20,.97),rgba(6,9,15,.94));
  border-bottom:1px solid var(--line); backdrop-filter:blur(6px);
}
.bar{display:flex; align-items:center; gap:14px; min-height:64px; flex-wrap:wrap}
.brand{
  font-family:var(--font-display); font-weight:900; letter-spacing:2px; font-size:22px;
  color:var(--gold-2); text-decoration:none; text-shadow:0 0 10px rgba(241,196,15,.45);
}
.brand-crown{filter:drop-shadow(0 0 8px rgba(241,196,15,.6))}
.lang-selector select{
  background:linear-gradient(135deg,#0d1320,#06090f); color:var(--gold-2);
  border:1px solid rgba(212,175,55,.4); padding:6px 12px; border-radius:6px;
  font:700 14px var(--font); cursor:pointer;
}
.lang-selector select option{background:#0d1320; color:#fff}
nav#mainNav{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-inline-start:auto}
nav#mainNav a{color:var(--text); text-decoration:none; padding:7px 14px; border-radius:var(--r-btn); font-weight:500}
nav#mainNav a:hover,nav#mainNav a.active{background:rgba(212,175,55,.12); color:var(--gold-2)}
nav#mainNav a.btn{color:#1a1200}
.menu-btn{display:none; margin-inline-start:auto; background:none; border:1px solid var(--line); color:var(--text); font-size:20px; padding:2px 12px; border-radius:var(--r-btn); cursor:pointer}

/* ---------- الأزرار ---------- */
.btn,.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(135deg,#f59e0b,#b45309); color:#1a1200; border:1px solid transparent;
  padding:11px 24px; border-radius:var(--r-btn); font:700 16px var(--font);
  text-decoration:none; cursor:pointer; transition:filter .15s, transform .15s;
}
.btn:hover,.cta-btn:hover{filter:brightness(1.12); color:#1a1200}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent; color:var(--gold-2); border-color:var(--line)}
.btn.ghost:hover{background:rgba(212,175,55,.1); color:var(--gold-2)}
.btn.small{padding:5px 14px; font-size:14px}
.btn.danger{background:linear-gradient(135deg,#dc2626,#991b1b); color:#fff}
.btn.danger:hover{color:#fff}
.btn.block{width:100%}
.cta-btn.secondary{background:rgba(14,165,233,.14); color:var(--blue); border-color:rgba(56,189,248,.45)}
.cta-btn.secondary:hover{background:#0284c7; color:#fff}

/* ---------- البطاقات واللوحات ---------- */
.card,.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card);
  padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.panel{margin-block:16px}
.panel.narrow{max-width:460px; margin-inline:auto}
.panel.mid{max-width:760px; margin-inline:auto}
.panel h2:first-child,.card h2:first-child{margin-top:0}
.grid{display:grid; gap:16px; margin-block:20px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.section-title{
  font-family:var(--font-display); text-align:center; margin:48px 0 22px; font-size:26px;
  background:linear-gradient(180deg,#fff,#fde047 55%,#d4af37); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.page-head{text-align:center; margin:8px 0 28px}
.page-head h1{
  font-family:var(--font-display); font-size:clamp(32px,6vw,54px); margin:0 0 6px; letter-spacing:2px;
  background:linear-gradient(180deg,#fff 0%,#ffe38f 40%,#d4af37 80%,#8a6d1c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(212,175,55,.35));
}
.page-head .sub{color:var(--blue); font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase}

/* ---------- الصفحة الرئيسية ---------- */
.hero{text-align:center; padding:40px 0 10px}
.crown-badge{font-size:54px; filter:drop-shadow(0 0 18px rgba(241,196,15,.7))}
.hero h1{
  font-family:var(--font-display); font-size:clamp(38px,8vw,78px); margin:0; letter-spacing:4px;
  background:linear-gradient(180deg,#fff 0%,#fff2b2 35%,#d4af37 75%,#8a6d1c 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(212,175,55,.4));
}
.hero .sub{color:var(--blue); font-weight:700; letter-spacing:3px; font-size:14px; margin-top:6px}
.welcome-box{max-width:820px; margin:30px auto 0; padding:30px; text-align:center;
  background:linear-gradient(135deg,rgba(13,19,32,.95),rgba(8,12,20,.98)); border:1px solid var(--line); border-radius:18px}
.welcome-box h2{margin-top:0}
.welcome-box p{color:var(--muted); font-size:18px}
.cta-buttons{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.announce{max-width:820px; margin:20px auto 0; padding:12px 18px; border:1px dashed var(--line); border-radius:var(--r-btn); color:var(--gold-2); text-align:center; background:rgba(212,175,55,.06)}
.stat-card{background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(9,14,26,.99)); border:1px solid var(--line); border-radius:var(--r-card); padding:22px 16px; text-align:center; position:relative; overflow:hidden}
.stat-card::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.stat-value{font:900 34px var(--font-display); color:#fff; margin-bottom:4px}
.stat-label{color:var(--muted); font-size:14px}
.status-dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-inline-end:8px}
.status-dot.online{background:var(--ok); box-shadow:0 0 10px var(--ok); animation:pulse 2s infinite}
.status-dot.offline{background:var(--bad)}
@keyframes pulse{50%{opacity:.45}}
.video-container{position:relative; padding-top:56.25%; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:#000}
.video-container iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.social-desc{text-align:center; color:var(--muted)}
.social-btns{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.social-btn{display:flex; align-items:center; justify-content:center; gap:8px; padding:14px; border-radius:var(--r-btn); color:#fff; font-weight:700; text-decoration:none; transition:transform .15s}
.social-btn:hover{transform:translateY(-2px); color:#fff}
.social-btn.facebook{background:linear-gradient(135deg,#1877f2,#0c4a9c)}
.social-btn.whatsapp{background:linear-gradient(135deg,#25d366,#128c7e)}
.social-btn.discord{background:linear-gradient(135deg,#5865f2,#404eed)}
.feature-box{background:linear-gradient(135deg,rgba(12,17,28,.92),rgba(6,9,15,.97)); border:1px solid var(--line-soft); border-radius:var(--r-card); padding:22px}
.feature-box p{color:var(--muted); margin:0}

/* ---------- الفورم ---------- */
form label{display:block; margin-bottom:16px; color:var(--muted); font-size:14px; font-weight:500}
input,select,textarea{
  display:block; width:100%; margin-top:6px; background:rgba(255,255,255,.05); color:var(--text);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-btn); padding:11px 14px; font:16px var(--font);
}
input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.08); border-color:var(--gold)}
select option{background:#0d1320; color:#fff}
textarea{resize:vertical; min-height:120px}
input[readonly]{opacity:.7}
.check{display:flex; gap:10px; align-items:center}
.check input{width:auto; margin:0}
.radio-row{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:16px}
.radio-row label{display:flex; align-items:center; gap:8px; margin:0; color:var(--text)}
.radio-row input{width:auto; margin:0}
form.inline{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 12px}
form.inline input,form.inline select{width:auto; margin:0; padding:7px 10px; font-size:14px}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 16px}
.hint{color:var(--muted); font-size:13px; margin-top:-8px; margin-bottom:14px}
.auth-links{text-align:center; color:var(--muted); font-size:14px; margin:18px 0 0}

/* ---------- التنبيهات ---------- */
.flash{padding:12px 18px; border-radius:var(--r-btn); margin-bottom:18px; border:1px solid}
.flash.ok{background:rgba(74,222,128,.1); border-color:rgba(74,222,128,.5); color:var(--ok)}
.flash.err{background:rgba(248,113,113,.1); border-color:rgba(248,113,113,.5); color:#fca5a5}

/* ---------- الجداول ---------- */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); background:rgba(12,17,27,.95)}
table{width:100%; border-collapse:collapse}
th,td{padding:11px 14px; text-align:start; border-bottom:1px solid var(--line-soft); white-space:nowrap}
th{color:var(--gold-2); font-weight:700; background:rgba(8,12,19,.85); position:sticky; top:0}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(56,189,248,.07)}
td.wrap-cell{white-space:normal; min-width:220px}
.rank-top1{background:rgba(241,196,15,.12) !important; font-weight:700}
.rank-top2{background:rgba(189,195,199,.08) !important}
.rank-top3{background:rgba(211,84,0,.08) !important}
.badge{display:inline-block; padding:2px 10px; border-radius:999px; background:#2980b9; color:#fff; font-weight:700; font-size:13px}
.tag{display:inline-block; padding:2px 10px; border-radius:6px; border:1px solid currentColor; font-size:13px; font-weight:700}
.pill{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid currentColor}
.pill.ok{background:rgba(74,222,128,.1)} .pill.bad{background:rgba(248,113,113,.1)} .pill.warn{background:rgba(251,191,36,.1)}

/* فلتر الترتيب */
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:18px}
.filter-bar a{padding:7px 16px; border-radius:999px; border:1px solid var(--line); color:var(--text); text-decoration:none; font-size:14px; font-weight:700}
.filter-bar a:hover{background:rgba(212,175,55,.1)}
.filter-bar a.active{background:linear-gradient(135deg,#f59e0b,#b45309); color:#1a1200; border-color:transparent}

.pager{display:flex; gap:10px; justify-content:center; margin:18px 0}

/* ---------- صفحة اللاعب (account) ---------- */
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px}
.kv div{background:rgba(255,255,255,.04); border:1px solid var(--line-soft); border-radius:var(--r-btn); padding:10px 14px}
.kv dt,.kv .k{color:var(--muted); font-size:12px}
.kv .v{font-weight:700; color:#fff; word-break:break-word}
.hero-char{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.hero-char .avatar{font-size:44px; width:84px; height:84px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(212,175,55,.1); border:1px solid var(--line)}
.hero-char h2{margin:0}
details.fold{margin-top:16px}
details.fold summary{cursor:pointer; color:var(--gold-2); font-weight:700; padding:8px 0}
.ticket{border:1px solid var(--line-soft); border-radius:var(--r-btn); padding:14px; margin-top:12px; background:rgba(255,255,255,.03)}
.ticket .reply{margin-top:10px; padding:10px 14px; border-inline-start:3px solid var(--gold); background:rgba(212,175,55,.07)}

/* ---------- لوحة الأدمن ---------- */
.admin-shell{display:grid; grid-template-columns:220px 1fr; gap:22px; padding-block:26px; position:relative; z-index:1; align-items:start; flex:1}
.side{position:sticky; top:84px; display:flex; flex-direction:column; gap:4px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:10px}
.side a{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-btn); color:var(--text); text-decoration:none; font-weight:500}
.side a:hover,.side a.active{background:rgba(212,175,55,.13); color:var(--gold-2)}
.side .count{margin-inline-start:auto; background:var(--bad); color:#fff; border-radius:999px; font-size:12px; padding:0 8px; font-weight:700}
.admin-main{min-width:0}
body.is-admin main.admin-main{padding-block:0}
.admin-main > h2:first-of-type{margin-top:0}

/* ---------- الفوتر ---------- */
.foot{margin-top:40px; padding:32px 16px 18px; text-align:center; position:relative; z-index:1;
  background:linear-gradient(135deg,rgba(8,12,20,.98),rgba(4,6,10,1)); border-top:1px solid var(--line)}
.foot-crown{font-size:28px; filter:drop-shadow(0 0 15px rgba(241,196,15,.7))}
.foot-name{font-family:var(--font-display); font-size:22px; font-weight:900; letter-spacing:3px;
  background:linear-gradient(180deg,#fff,#fde047 50%,#d4af37); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.foot-sub{color:var(--blue); font-size:11px; font-weight:700; letter-spacing:4px; text-transform:uppercase; margin-top:4px}
.foot-copy{color:var(--muted); font-size:13.5px; border-top:1px solid var(--line-soft); margin:18px auto 0; padding-top:14px; max-width:1120px}
.foot-copy span{color:var(--gold-2); font-weight:700}
.audio-btn{position:fixed; bottom:20px; inset-inline-start:20px; z-index:60; width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(13,19,32,.92); border:1px solid var(--gold); box-shadow:0 0 20px rgba(212,175,55,.45); font-size:20px; display:flex; align-items:center; justify-content:center; transition:transform .2s}
.audio-btn:hover{transform:scale(1.1)}

/* ---------- موبايل ---------- */
@media (max-width:860px){
  .admin-shell{grid-template-columns:1fr}
  .side{position:static; flex-direction:row; overflow-x:auto}
  .side a{white-space:nowrap}
}
@media (max-width:720px){
  .menu-btn{display:block}
  nav#mainNav{display:none; width:100%; flex-direction:column; align-items:stretch; padding-bottom:12px; margin-inline-start:0}
  nav#mainNav.open{display:flex}
  .brand{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}