/* ============================================================
   Ali Hussein Arena Pro
   لوحة ألوان: ليل بنفسجي + بنفسجي كهربائي + سماوي + ذهب الفوز
   الخطوط: Lalezar للعناوين · Cairo للنص
   ============================================================ */

:root{
  --bg:        #0B0918;
  --bg-2:      #120E24;
  --surface:   #17132B;
  --surface-2: #1F1940;
  --raise:     #272052;
  --line:      #2E2752;
  --line-soft: #241E45;

  --text:      #F3EFFF;
  --muted:     #9B92C4;
  --faint:     #6E6796;

  --violet:    #7C4DFF;
  --violet-lo: #5B34CC;
  --cyan:      #22D3EE;
  --gold:      #FFC93C;
  --red:       #FF4D6D;
  --green:     #37E39B;
  --orange:    #FF8A3D;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;

  --shadow: 0 18px 40px -18px rgba(0,0,0,.9);
  --glow-v: 0 0 0 1px rgba(124,77,255,.35), 0 10px 30px -10px rgba(124,77,255,.55);
  --glow-c: 0 0 0 1px rgba(34,211,238,.35), 0 10px 30px -10px rgba(34,211,238,.5);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,77,255,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(34,211,238,.10), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
button{ font-family:inherit; color:inherit; }
input,select,textarea{ font-family:inherit; }
[hidden]{ display:none !important; }

h1,h2,h3,h4{ margin:0; text-wrap:balance; }

.display{ font-family:"Lalezar","Cairo",sans-serif; font-weight:400; letter-spacing:.2px; }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--raise); border-radius:99px; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============================================================
   شاشة الدخول
   ============================================================ */
.gate{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b));
  position:relative;
}
.gate-glow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(520px 320px at 50% 8%, rgba(124,77,255,.35), transparent 70%),
    radial-gradient(420px 260px at 20% 90%, rgba(34,211,238,.16), transparent 70%);
}
.gate-card{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 20px 20px;
  box-shadow: var(--shadow);
}

.brand{ text-align:center; margin-bottom:22px; }
.brand-mark{
  width:66px; height:66px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center; gap:1px;
  border-radius:18px;
  background: linear-gradient(145deg, var(--violet), #3E1FA8);
  box-shadow: var(--glow-v);
  font-family:"Lalezar",sans-serif; font-size:30px; line-height:1;
  transform: rotate(-4deg);
}
.brand-mark .bm-a{ color:#fff; }
.brand-mark .bm-h{ color: var(--gold); }
.brand-name{
  font-family:"Lalezar",sans-serif;
  font-size: clamp(26px, 8vw, 34px);
  line-height:1.1; color:var(--text);
}
.brand-name em{ font-style:normal; color:var(--cyan); }
.brand-sub{
  margin:8px 0 0; color:var(--muted); font-size:13px;
  letter-spacing:.3px;
}

.seg{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background: var(--bg-2); border:1px solid var(--line-soft);
  padding:4px; border-radius:999px; margin-bottom:18px;
}
.seg-btn{
  border:0; background:transparent; color:var(--muted);
  padding:9px 8px; border-radius:999px; font-size:13px; font-weight:600;
  cursor:pointer; transition: background .18s, color .18s;
}
.seg-btn.is-on{ background:var(--violet); color:#fff; }

.gate-form{ display:flex; flex-direction:column; gap:15px; }

.fld{ display:flex; flex-direction:column; gap:7px; border:0; padding:0; margin:0; min-width:0; }
.fld-label{ font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.4px; padding:0; }
.fld-hint{ font-size:11.5px; color:var(--faint); line-height:1.5; }

.inp{
  width:100%;
  background: var(--bg-2);
  border:1px solid var(--line);
  border-radius: var(--r-sm);
  padding:12px 13px;
  color:var(--text); font-size:15px;
  transition: border-color .18s, box-shadow .18s;
}
.inp::placeholder{ color:var(--faint); }
.inp:focus{ outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,77,255,.2); }
.inp-code{
  font-family:"Cairo",monospace; letter-spacing:2px; text-transform:uppercase;
  text-align:center; direction:ltr; font-weight:800;
}
.inp-pin{
  text-align:center; letter-spacing:12px; direction:ltr;
  font-size:22px; font-weight:800; padding-inline-start:25px;
}

.avatar-fld .fld-label{ margin-bottom:2px; }
.avatar-grid{
  display:grid; grid-template-columns:repeat(8, 1fr); gap:6px;
}
.av-opt{
  aspect-ratio:1; border:1px solid var(--line); background:var(--bg-2);
  border-radius:10px; font-size:19px; cursor:pointer; padding:0;
  display:grid; place-items:center;
  transition: transform .14s, border-color .14s, background .14s;
}
.av-opt:hover{ transform:translateY(-2px); }
.av-opt.is-on{
  border-color:var(--violet); background:rgba(124,77,255,.2);
  box-shadow:0 0 0 2px rgba(124,77,255,.3);
}

.form-msg{ margin:0; font-size:13px; min-height:18px; color:var(--muted); }
.form-msg.err{ color:var(--red); }
.form-msg.ok{ color:var(--green); }

.gate-foot{
  margin:18px 0 0; text-align:center; font-size:12.5px; color:var(--faint);
  border-top:1px solid var(--line-soft); padding-top:14px;
}
.gate-foot strong{ color:var(--gold); }

/* ============================================================
   أزرار
   ============================================================ */
.btn{
  border:1px solid var(--line); background:var(--surface-2); color:var(--text);
  border-radius: var(--r-sm); padding:10px 16px;
  font-size:14px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition: transform .12s, filter .18s, background .18s;
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-primary{
  background: linear-gradient(145deg, var(--violet), var(--violet-lo));
  border-color: transparent; color:#fff;
  box-shadow: var(--glow-v);
}
.btn-cyan{ background:linear-gradient(145deg, var(--cyan), #0E90A8); border-color:transparent; color:#04212A; }
.btn-gold{ background:linear-gradient(145deg, var(--gold), #D89A0B); border-color:transparent; color:#2A1D00; }
.btn-danger{ background:rgba(255,77,109,.14); border-color:rgba(255,77,109,.4); color:var(--red); }
.btn-ghost{ background:transparent; }
.btn-lg{ padding:14px 18px; font-size:15.5px; border-radius:12px; }
.btn-sm{ padding:7px 11px; font-size:12.5px; border-radius:9px; }
.btn-block{ width:100%; }

.icon-btn{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--surface-2);
  border-radius:11px; cursor:pointer; padding:0; flex:none;
}
.icon-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* ============================================================
   شريط اللاعب
   ============================================================ */
.app{ min-height:100%; display:flex; flex-direction:column; }

.hud{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:11px;
  padding: calc(10px + var(--safe-t)) 14px 10px;
  background: rgba(11,9,24,.86);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.hud-me{
  display:flex; align-items:center; gap:9px;
  background:transparent; border:0; padding:0; cursor:pointer; min-width:0;
}
.hud-av{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  font-size:22px; border-radius:13px;
  background: linear-gradient(145deg, var(--raise), var(--surface));
  border:1px solid var(--line);
}
.hud-txt{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; line-height:1.25; }
.hud-nick{ font-size:14px; font-weight:800; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hud-title{ font-style:normal; font-size:11px; color:var(--gold); font-weight:700; }

.hud-prog{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.hud-prog-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.lvl-chip{
  font-family:"Lalezar",sans-serif; font-size:12px; direction:ltr;
  background:var(--violet); color:#fff; padding:1px 8px; border-radius:999px;
}
.hud-xp{ font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; direction:ltr; }
.bar{ height:6px; background:var(--bg-2); border-radius:99px; overflow:hidden; border:1px solid var(--line-soft); }
.bar>i{ display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--cyan)); border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.2,1); }

.hud-coins{
  flex:none; display:flex; align-items:center; gap:4px;
  background:rgba(255,201,60,.12); border:1px solid rgba(255,201,60,.32);
  color:var(--gold); padding:5px 10px; border-radius:999px;
  font-size:13px; font-weight:800; font-variant-numeric:tabular-nums;
}
.coin-i{ font-size:11px; }

/* ============================================================
   المحتوى
   ============================================================ */
.view{
  flex:1;
  padding: 18px 16px calc(96px + var(--safe-b));
  max-width: 760px; width:100%; margin-inline:auto;
  animation: fadeUp .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

.sec{ margin-bottom:28px; }
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-bottom:12px;
}
.sec-title{ font-family:"Lalezar",sans-serif; font-size:20px; }
.sec-more{ background:none; border:0; color:var(--cyan); font-size:12.5px; font-weight:700; cursor:pointer; padding:0; }

.eyebrow{
  font-size:11px; font-weight:800; letter-spacing:1.4px;
  color:var(--faint); text-transform:uppercase; margin-bottom:6px;
}

/* بطاقات */
.card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: var(--r);
  padding:16px;
}
.card-quiet{ background:var(--bg-2); border-color:var(--line-soft); }

/* إعلان علي */
.ann{
  display:flex; gap:11px; align-items:flex-start;
  background: linear-gradient(135deg, rgba(255,201,60,.14), rgba(255,138,61,.06));
  border:1px solid rgba(255,201,60,.32);
  border-radius: var(--r); padding:14px; margin-bottom:20px;
}
.ann-i{ font-size:20px; flex:none; line-height:1.3; }
.ann-b{ min-width:0; }
.ann-t{ font-size:11px; font-weight:800; color:var(--gold); letter-spacing:1px; margin-bottom:2px; }
.ann-x{ font-size:14px; line-height:1.55; overflow-wrap:anywhere; }

/* تحدي اليوم */
.daily{
  position:relative; overflow:hidden;
  background: linear-gradient(150deg, #2A1B5E, var(--surface));
  border:1px solid var(--violet-lo);
  border-radius: var(--r-lg); padding:18px;
}
.daily::after{
  content:""; position:absolute; inset-inline-end:-40px; top:-40px;
  width:150px; height:150px; border-radius:50%;
  background: radial-gradient(circle, rgba(124,77,255,.5), transparent 70%);
  pointer-events:none;
}
.daily-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; position:relative; }
.daily-tag{
  font-size:11px; font-weight:800; letter-spacing:1px;
  background:var(--violet); color:#fff; padding:3px 10px; border-radius:999px;
}
.daily-timer{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.daily-q{ font-size:17px; font-weight:700; line-height:1.55; margin-bottom:14px; position:relative; }

.opts{ display:flex; flex-direction:column; gap:8px; position:relative; }
.opt{
  text-align:start; width:100%;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:14.5px; font-weight:600; cursor:pointer;
  transition: background .16s, border-color .16s, transform .12s;
}
.opt:hover:not(:disabled){ background:rgba(255,255,255,.09); transform:translateX(-3px); }
.opt:disabled{ cursor:default; }
.opt.is-right{ border-color:var(--green); background:rgba(55,227,155,.16); color:var(--green); }
.opt.is-wrong{ border-color:var(--red); background:rgba(255,77,109,.14); color:var(--red); }

.done-box{ text-align:center; padding:8px 0 2px; position:relative; }
.done-em{ font-size:34px; line-height:1; margin-bottom:8px; }
.done-tx{ font-size:14px; color:var(--muted); }

/* شبكة الألعاب */
.grid{ display:grid; gap:11px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:420px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }

.gcard{
  position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r);
  padding:14px 13px; text-align:start; cursor:pointer;
  background: var(--surface);
  transition: transform .16s, border-color .16s;
  display:flex; flex-direction:column; gap:3px; min-height:112px;
}
.gcard:hover{ transform:translateY(-3px); border-color:var(--violet); }
.gcard-i{ font-size:26px; line-height:1; margin-bottom:5px; }
.gcard-n{ font-family:"Lalezar",sans-serif; font-size:16px; }
.gcard-d{ font-size:11.5px; color:var(--muted); line-height:1.45; }
.gcard-best{
  margin-top:auto; padding-top:8px;
  font-size:11px; color:var(--gold); font-weight:800;
  font-variant-numeric:tabular-nums;
}
.gcard-best.none{ color:var(--faint); font-weight:600; }
.gcard::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:3px;
  background: var(--accent, var(--violet));
}

/* أزرار سريعة */
.quick{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.qbtn{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:13px 8px; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:6px; transition:transform .14s, border-color .14s;
}
.qbtn:hover{ transform:translateY(-2px); border-color:var(--cyan); }
.qbtn-i{ font-size:21px; line-height:1; }
.qbtn-t{ font-size:11.5px; font-weight:700; }

/* الصدارة */
.lb-tabs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:14px; scrollbar-width:none; }
.lb-tabs::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; background:var(--surface); border:1px solid var(--line);
  color:var(--muted); border-radius:999px; padding:7px 13px;
  font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition: background .16s, color .16s, border-color .16s;
}
.chip.is-on{ background:var(--violet); border-color:transparent; color:#fff; }

.rank{ display:flex; flex-direction:column; gap:7px; }
.row{
  display:flex; align-items:center; gap:11px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:13px; padding:10px 13px;
}
.row.me{ border-color:var(--cyan); background:rgba(34,211,238,.07); }
.row-n{
  width:26px; flex:none; text-align:center;
  font-family:"Lalezar",sans-serif; font-size:15px; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.row.r1 .row-n{ color:var(--gold); }
.row.r2 .row-n{ color:#C9D2E3; }
.row.r3 .row-n{ color:#E08B4C; }
.row-av{ font-size:21px; flex:none; }
.row-b{ flex:1; min-width:0; }
.row-nm{ font-size:14px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-sub{ font-size:11px; color:var(--faint); }
.row-v{ font-family:"Lalezar",sans-serif; font-size:17px; color:var(--cyan); font-variant-numeric:tabular-nums; direction:ltr; }

/* الملف الشخصي */
.prof{
  text-align:center; padding:22px 16px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg);
  position:relative; overflow:hidden;
}
.prof::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(300px 140px at 50% 0%, rgba(124,77,255,.3), transparent 70%);
}
.prof-av{
  width:84px; height:84px; margin:0 auto 12px; position:relative;
  display:grid; place-items:center; font-size:42px;
  border-radius:26px;
  background:linear-gradient(145deg, var(--raise), var(--surface-2));
  border:2px solid var(--violet);
  box-shadow: var(--glow-v);
}
.prof-nm{ font-family:"Lalezar",sans-serif; font-size:25px; position:relative; }
.prof-ttl{
  display:inline-block; margin-top:6px; position:relative;
  background:rgba(255,201,60,.14); border:1px solid rgba(255,201,60,.35);
  color:var(--gold); padding:3px 14px; border-radius:999px;
  font-size:12.5px; font-weight:800;
}
.prof-ttl.is-gift{
  background:rgba(34,211,238,.14); border-color:rgba(34,211,238,.4); color:var(--cyan);
}
.prof-showcase{
  position:relative; display:flex; gap:6px; justify-content:center; margin-top:11px; flex-wrap:wrap;
}
.prof-showcase .sb{
  width:34px; height:34px; display:grid; place-items:center; font-size:17px;
  border-radius:11px; background:rgba(255,201,60,.12);
  border:1px solid rgba(255,201,60,.38);
}
.row-ics{ font-size:12px; letter-spacing:1px; }
.row-sub.gift{ color:var(--cyan); font-weight:700; }

.prof-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  margin-top:18px; position:relative;
}
.stat{ background:rgba(0,0,0,.28); border:1px solid var(--line-soft); border-radius:13px; padding:11px 6px; }
.stat-v{ font-family:"Lalezar",sans-serif; font-size:21px; color:var(--cyan); font-variant-numeric:tabular-nums; }
.stat-l{ font-size:10.5px; color:var(--muted); font-weight:700; }

/* الشارات */
.badges{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; }
.badge{
  position:relative; text-align:center; padding:13px 6px 10px;
  border:1px solid var(--line); border-radius:15px; background:var(--surface);
}
.badge.locked{ opacity:.34; filter:grayscale(1); }
.badge.gift{ border-color:rgba(255,201,60,.5); background:linear-gradient(160deg, rgba(255,201,60,.12), var(--surface)); }
.badge-i{ font-size:26px; line-height:1; margin-bottom:6px; }
.badge-n{ font-size:11px; font-weight:800; line-height:1.35; }
.badge-d{ font-size:9.5px; color:var(--faint); margin-top:3px; line-height:1.4; }
.badge-lock{
  position:absolute; top:6px; inset-inline-end:7px; font-size:10px; color:var(--faint);
}
.badge-price{
  margin-top:7px; font-size:10.5px; font-weight:800; color:var(--gold);
  display:flex; align-items:center; justify-content:center; gap:3px;
}

/* اللوحة الإدارية */
.adm-sec{ margin-bottom:22px; }
.adm-h{
  font-family:"Lalezar",sans-serif; font-size:17px; margin-bottom:10px;
  display:flex; align-items:center; gap:7px;
}
.adm-h .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }

.code-row{
  display:flex; align-items:center; gap:9px;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:11px; padding:10px 12px; margin-bottom:7px;
}
.code-v{
  flex:1; font-family:"Cairo",monospace; font-weight:800; letter-spacing:1.5px;
  direction:ltr; text-align:start; font-size:14px;
}
.code-row.used .code-v{ text-decoration:line-through; color:var(--faint); letter-spacing:1px; }
.code-tag{ font-size:10.5px; padding:2px 8px; border-radius:999px; font-weight:800; flex:none; }
.tag-free{ background:rgba(55,227,155,.16); color:var(--green); }
.tag-used{ background:rgba(155,146,196,.14); color:var(--muted); }

.mini-tabs{ display:flex; gap:5px; margin-bottom:14px; flex-wrap:wrap; }

/* قائمة اختيار اللاعب */
select.sel{
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(0% + 16px) calc(50% + 1px), calc(0% + 21px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-inline-start:36px;
  font-weight:700; cursor:pointer;
}

.sel-card{
  margin-top:12px; padding:14px;
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--line); border-radius:var(--r);
}
.sel-top{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.sel-av{
  width:48px; height:48px; flex:none; display:grid; place-items:center;
  font-size:26px; border-radius:14px;
  background:linear-gradient(145deg,var(--raise),var(--surface));
  border:1px solid var(--line);
}
.sel-id{ min-width:0; }
.sel-nm{ font-family:"Lalezar",sans-serif; font-size:19px; line-height:1.25; }
.sel-ttl{ font-size:12px; font-weight:800; color:var(--gold); }
.sel-ttl.gift{ color:var(--cyan); }
.sel-badges{
  display:flex; gap:6px; flex-wrap:wrap; margin-top:11px;
  padding-top:11px; border-top:1px solid var(--line-soft);
}
.sel-badges .sb{
  width:30px; height:30px; display:grid; place-items:center; font-size:15px;
  border-radius:9px; background:rgba(255,201,60,.12);
  border:1px solid rgba(255,201,60,.35);
}

/* شبكة الشارات باللوحة */
.badge.dim{ opacity:.42; filter:grayscale(.7); }
.badge.owned{
  border-color:var(--gold);
  background:linear-gradient(160deg,rgba(255,201,60,.2),var(--surface));
}
.badge-tick{
  position:absolute; top:5px; inset-inline-end:6px;
  width:17px; height:17px; border-radius:50%;
  background:var(--gold); color:#2A1D00;
  font-size:10px; font-weight:900; display:grid; place-items:center;
}

.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:14px;
}
.stat-strip .ss{
  background:var(--bg-2); border:1px solid var(--line-soft);
  border-radius:11px; padding:9px 4px; text-align:center; min-width:0;
}
.ss-v{
  font-family:"Lalezar",sans-serif; font-size:17px; color:var(--cyan);
  font-variant-numeric:tabular-nums; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-l{ font-size:9.5px; color:var(--muted); font-weight:700; }

.title-grid{ display:flex; flex-wrap:wrap; gap:7px; }
.title-opt{
  background:var(--surface); border:1px solid var(--line); color:var(--muted);
  border-radius:999px; padding:8px 13px; font-size:12.5px; font-weight:700;
  cursor:pointer; transition: background .16s, color .16s, border-color .16s;
}
.title-opt:hover{ border-color:var(--cyan); }
.title-opt.is-on{
  background:rgba(34,211,238,.16); border-color:var(--cyan); color:var(--cyan);
}

/* الطبقة (الألعاب) */
.stage{
  position:fixed; inset:0; z-index:80;
  background: var(--bg);
  display:flex; flex-direction:column;
}
.stage-bar{
  display:flex; align-items:center; gap:11px;
  padding: calc(10px + var(--safe-t)) 14px 10px;
  border-bottom:1px solid var(--line-soft);
  background: var(--bg-2);
}
.stage-bar .icon-btn svg{ transform: scaleX(-1); }
.stage-title{ flex:1; font-family:"Lalezar",sans-serif; font-size:18px; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-score{ font-size:12px; color:var(--muted); flex:none; }
.stage-score b{ font-family:"Lalezar",sans-serif; font-size:18px; color:var(--cyan);
  font-variant-numeric:tabular-nums; margin-inline-start:4px; }
.stage-body{ flex:1; overflow:auto; display:flex; flex-direction:column;
  padding: 14px 16px calc(18px + var(--safe-b)); }

.play-wrap{ flex:1; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; }
canvas.game{
  width:100%; max-width:440px; aspect-ratio:3/4; max-height:100%;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); touch-action:none; display:block;
}
.hint{ font-size:12.5px; color:var(--faint); text-align:center; max-width:340px; line-height:1.6; }

.over{
  text-align:center; padding:26px 18px; max-width:340px; margin:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.over-em{ font-size:44px; line-height:1; margin-bottom:10px; }
.over-t{ font-family:"Lalezar",sans-serif; font-size:24px; margin-bottom:4px; }
.over-s{ font-size:13.5px; color:var(--muted); margin-bottom:8px; }
.over-v{ font-family:"Lalezar",sans-serif; font-size:46px; color:var(--cyan);
  font-variant-numeric:tabular-nums; line-height:1.1; direction:ltr; }
.over-rw{
  display:inline-flex; gap:12px; margin:12px 0 18px; padding:7px 14px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; font-weight:800;
}
.over-rw .xp{ color:var(--violet); }
.over-rw .co{ color:var(--gold); }
.over-btns{ display:flex; gap:9px; }
.over-btns .btn{ flex:1; }

/* الشريط السفلي */
.tabs{
  position:fixed; inset-inline:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around; gap:2px;
  background: rgba(18,14,36,.95);
  backdrop-filter: blur(16px);
  border-top:1px solid var(--line);
  padding: 7px 6px calc(7px + var(--safe-b));
}
.tab{
  flex:1; min-width:0; background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:5px 2px; color:var(--faint); border-radius:11px;
  transition: color .16s, background .16s;
}
.tab svg{ width:21px; height:21px; fill:currentColor; }
.tab span{ font-size:9.5px; font-weight:700; }
.tab.is-on{ color:var(--violet); background:rgba(124,77,255,.13); }
.tab-owner.is-on{ color:var(--gold); background:rgba(255,201,60,.13); }

/* تنبيه */
.toast{
  position:fixed; inset-inline:16px; bottom: calc(86px + var(--safe-b)); z-index:200;
  margin-inline:auto; max-width:330px;
  background:var(--raise); border:1px solid var(--violet);
  border-radius:13px; padding:12px 15px; text-align:center;
  font-size:13.5px; font-weight:700; box-shadow:var(--shadow);
  animation: toastIn .3s cubic-bezier(.2,.9,.2,1);
}
.toast.gold{ border-color:var(--gold); background:linear-gradient(145deg,#4A3510,var(--raise)); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.96);} to{ opacity:1; transform:none; } }

/* نافذة */
.modal{
  position:fixed; inset:0; z-index:150;
  background: rgba(5,4,12,.78); backdrop-filter: blur(5px);
  display:grid; place-items:center; padding:20px;
}
.modal-card{
  width:100%; max-width:380px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow);
  max-height:80vh; overflow:auto;
  animation: fadeUp .25s cubic-bezier(.2,.8,.2,1);
}
.modal-title{ font-family:"Lalezar",sans-serif; font-size:20px; margin-bottom:10px; }
.modal-body{ font-size:14px; color:var(--muted); line-height:1.65; margin-bottom:16px; }
.modal-foot{ display:flex; gap:9px; }
.modal-foot .btn{ flex:1; }

/* عناصر مشتركة */
.empty{ text-align:center; padding:34px 18px; color:var(--faint); }
.empty-em{ font-size:32px; margin-bottom:8px; }
.empty-t{ font-size:13.5px; line-height:1.6; }

.pill{
  display:inline-block; padding:2px 9px; border-radius:999px;
  font-size:10.5px; font-weight:800;
  background:var(--raise); color:var(--muted);
}
.pill-v{ background:rgba(124,77,255,.2); color:#B79BFF; }
.pill-c{ background:rgba(34,211,238,.16); color:var(--cyan); }
.pill-g{ background:rgba(255,201,60,.16); color:var(--gold); }
.pill-r{ background:rgba(255,77,109,.16); color:var(--red); }

.stack{ display:flex; flex-direction:column; gap:10px; }
.split{ display:flex; gap:9px; align-items:center; }
.split>*{ flex:1; min-width:0; }
.split>.flex-none{ flex:none; }

.big-code{
  font-family:"Lalezar",sans-serif; font-size:40px; letter-spacing:8px;
  direction:ltr; text-align:center; color:var(--cyan);
  background:var(--bg-2); border:1px dashed var(--line);
  border-radius:var(--r); padding:16px 10px; margin-block:12px;
  padding-inline-start:18px;
}

.word-reveal{
  text-align:center; padding:28px 18px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
}
.word-role{ font-size:12px; font-weight:800; letter-spacing:2px; color:var(--muted); margin-bottom:8px; }
.word-main{ font-family:"Lalezar",sans-serif; font-size:34px; line-height:1.2; }
.word-main.imp{ color:var(--red); }
.word-main.crew{ color:var(--green); }
.word-cat{ margin-top:10px; font-size:13px; color:var(--muted); }
.word-cat b{ color:var(--cyan); }
.mission{
  margin-top:16px; padding:12px 14px; border-radius:12px;
  background:rgba(124,77,255,.12); border:1px solid rgba(124,77,255,.35);
  font-size:13px; line-height:1.6;
}
.mission b{ color:#B79BFF; display:block; font-size:11px; letter-spacing:1px; margin-bottom:3px; }

.plist{ display:flex; flex-direction:column; gap:7px; }
.pl{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
}
.pl-av{ font-size:19px; flex:none; }
.pl-n{ flex:1; font-size:13.5px; font-weight:700; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl.host{ border-color:rgba(255,201,60,.4); }
.pl.voted{ border-color:rgba(34,211,238,.4); }
.pl.out{ opacity:.45; }
.pl.out .pl-n{ text-decoration:line-through; }

.timer-ring{
  font-family:"Lalezar",sans-serif; font-size:28px; color:var(--cyan);
  font-variant-numeric:tabular-nums; text-align:center; direction:ltr;
}
.timer-ring.warn{ color:var(--red); }

.qz-prog{ display:flex; gap:4px; margin-bottom:14px; }
.qz-prog i{ flex:1; height:4px; border-radius:99px; background:var(--line); }
.qz-prog i.ok{ background:var(--green); }
.qz-prog i.no{ background:var(--red); }
.qz-prog i.now{ background:var(--cyan); }

/* ============================================================
   تثبيت التطبيق بالشاشة الرئيسية
   ============================================================ */
.install-bar{
  position:fixed; inset-inline:12px; bottom: calc(80px + var(--safe-b)); z-index:120;
  margin-inline:auto; max-width:440px;
  display:flex; align-items:center; gap:11px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  border:1px solid var(--violet); border-radius:16px;
  padding:11px 13px; box-shadow: var(--shadow);
  animation: toastIn .35s cubic-bezier(.2,.9,.2,1);
}
.ib-icon{ width:40px; height:40px; border-radius:11px; flex:none; }
.ib-txt{ flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; }
.ib-txt strong{ font-size:13px; }
.ib-txt span{ font-size:11px; color:var(--muted); }
.install-bar .icon-btn{ width:30px; height:30px; border-radius:9px; }
.install-bar .icon-btn svg{ width:15px; height:15px; }

/* خطوات التثبيت على الآيفون */
.ios-steps{ display:flex; flex-direction:column; gap:12px; }
.ios-step{ display:flex; gap:11px; align-items:flex-start; }
.ios-step-n{
  width:24px; height:24px; flex:none; border-radius:50%;
  background:var(--violet); color:#fff; display:grid; place-items:center;
  font-size:12px; font-weight:800; font-family:"Lalezar",sans-serif;
}
.ios-step-t{ font-size:13.5px; color:var(--text); line-height:1.6; }
.ios-step-t b{ color:var(--cyan); }

/* ============================================================
   تحسينات النقال
   ============================================================ */
body{
  overscroll-behavior-y: contain;   /* يمنع سحب الصفحة أثناء اللعب */
}

/* ما ينختار النص عند اللمس المتكرر */
.tab, .btn, .opt, .gcard, .qbtn, .chip, .av-opt, .badge, .seg-btn,
.hud-me, .icon-btn, .pl, .stage-bar, .row{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

/* مساحة لمس مريحة للأصابع الصغيرة */
@media (pointer: coarse){
  .btn{ min-height:44px; }
  .btn-sm{ min-height:36px; }
  .opt{ min-height:48px; }
  .tab{ min-height:48px; }
  .av-opt{ min-height:42px; }
}

/* شاشات صغيرة جداً */
@media (max-width:360px){
  .hud-nick{ max-width:64px; }
  .tab span{ font-size:9px; }
  .avatar-grid{ grid-template-columns:repeat(6,1fr); }
  .brand-name{ font-size:24px; }
  .big-code{ font-size:32px; letter-spacing:6px; }
}

/* شاشة عريضة — الساحة تبقى بالوسط */
@media (min-width:860px){
  .tabs{ max-width:560px; margin-inline:auto; border-radius:18px 18px 0 0;
         border-inline:1px solid var(--line); }
}

/* لمّا يفتح كتطبيق مثبّت */
@media (display-mode: standalone){
  .install-bar{ display:none !important; }
  body{ overscroll-behavior: none; }
}

/* زر المشاركة */
.share-row{ display:flex; gap:8px; margin-top:10px; }
.share-row .btn{ flex:1; }