/* ════════════════════════════════════════
   wanasif.css — نظام التصميم المشترك
   لؤلؤي بنفسجي · خطوط Abu Dhabi Pro
   ════════════════════════════════════════ */

/* ── الخطوط ── */
@font-face {
  font-family: 'AbuDhabiPro';
  src: url('fonts/AbuDhabiPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'AbuDhabiPro';
  src: url('fonts/AbuDhabiPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'AbuDhabiPro';
  src: url('fonts/AbuDhabiPro-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: 'HelveticaArabic';
  src: url('fonts/HelveticaNeueLTArabic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* ── المتغيرات ── */
:root {
  /* الخلفيات */
  --cream:    #F4F2F8;
  --cream2:   #EDE9FA;
  --cream3:   #DAD4F0;

  /* الشريط الجانبي — فاتح */
  --sb:       #E8E4F4;
  --sb2:      #DDD8F0;
  --sb3:      #CFC8EE;
  --sbb:      rgba(92,75,158,.14);

  /* الألوان الرئيسية */
  --accent:   #5C4B9E;
  --accent2:  #4A3B8A;
  --gold:     #7C6EC8;

  /* النصوص */
  --brown:    #2D1F5E;
  --brown2:   #3D2E7A;
  --muted:    #5A4A8C;
  --sb-text:  #2D1F5E;
  --sb-muted: rgba(45,31,94,.65);
  --sbt:      #2D1F5E;

  /* حالات */
  --green:    #2d7a4e;
  --red:      #c0392b;

  /* الخط الأساسي */
  --font-main: 'AbuDhabiPro', sans-serif;
}

/* ── ريست أساسي ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  background: var(--cream);
  color: var(--brown);
  min-height: 100vh;
  /* منع تحديد النص أثناء اللمس على الأزرار */
  -webkit-text-size-adjust: 100%;
}

/* ── إصلاحات اللمس العالمية ── */
button, a, label, [role="button"] {
  /* إزالة التأخير 300ms عند الضغط (Android/Chrome) */
  touch-action: manipulation;
  /* إزالة المستطيل الأزرق عند اللمس */
  -webkit-tap-highlight-color: transparent;
}

/* ── منع iOS Safari من التكبير على حقول الإدخال ── */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════
   UNIFIED PLAYER NAV — وناسف
   نفس الشكل في جميع ألعاب اللاعبين
   ══════════════════════════════════════ */
.wn-nav {
  background: #E8E4F4 !important;
  border-bottom: 1px solid rgba(92,75,158,.13) !important;
  height: 54px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  gap: 8px;
}
.wn-nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.wn-nav-logo img { height: 30px; width: auto; }
.wn-nav-title {
  font-size: .82rem;
  font-weight: 700;
  color: rgba(45,31,94,.5);
  white-space: nowrap;
  flex: 1;
  text-align: center;
}
.wn-nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.wn-nav-player {
  font-size: .75rem;
  font-weight: 700;
  color: rgba(45,31,94,.6);
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wn-btn-home {
  background: rgba(92,75,158,.10);
  border: 1.5px solid rgba(92,75,158,.22);
  border-radius: 20px;
  padding: 5px 13px;
  font-family: var(--font-main);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  color: rgba(45,31,94,.75);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .18s;
  white-space: nowrap;
}
.wn-btn-home:hover { background: rgba(92,75,158,.18); color: #2D1F5E; }
.wn-btn-exit {
  background: rgba(217,119,6,.09);
  border: 1.5px solid rgba(217,119,6,.28);
  border-radius: 20px;
  padding: 5px 13px;
  font-family: var(--font-main);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  color: #92400e;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all .18s;
  white-space: nowrap;
}
.wn-btn-exit:hover { background: rgba(217,119,6,.18); }
@media (max-width: 480px) {
  .wn-nav-title { display: none; }
  .wn-nav-player { display: none; }
  .wn-btn-home span, .wn-btn-exit span { display: none; }
}