@charset "UTF-8";

/* ============================================================
   Pro UI — طبقة مشتركة للصفحتين
   - خطوط عربية، RTL، حركة محترمة، إعدادات، شريط مصغّر
   ============================================================ */

:root {
  color-scheme: dark;
  --ui-accent: var(--accent, var(--brand, #2ee678));
  --ui-panel: var(--card, var(--panel, #0f1626));
  --ui-panel-2: var(--card-2, var(--panel2, #0a1120));
  --ui-text: var(--text, var(--txt, #eef4ff));
  --ui-muted: var(--muted, var(--dim, #9fb1d4));
  --ui-faint: var(--faint, #657aa0);
  --ui-line: var(--line, #223049);
  --ui-radius: var(--r-lg, var(--radius, 18px));
  --ui-safe-b: var(--safe-b, env(safe-area-inset-bottom, 0px));
  --font-ui: 'Cairo', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-display: 'Noto Kufi Arabic', 'Cairo', system-ui, sans-serif;
  --dur-fast: .16s;
  --dur: .3s;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .display { font-family: var(--font-display); text-wrap: balance; }
p, .sub, .status { text-wrap: pretty; }
button, input, select, textarea { font-family: inherit; }
button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--ui-accent) 35%, transparent); color: #fff; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: -60px; inset-inline-start: 14px; z-index: 200;
  padding: 10px 14px; border-radius: 10px; background: var(--ui-accent); color: #04120a;
  font-weight: 800; transition: inset-block-start var(--dur-fast) var(--ease);
}
.skip-link:focus { inset-block-start: 12px; }

/* ===== شريط تقدم التمرير ===== */
.scroll-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--ui-accent), #3ea6ff, #8b5cf6);
  transform: scaleX(0); transform-origin: 100% 50%;
  pointer-events: none; box-shadow: 0 0 12px color-mix(in srgb, var(--ui-accent) 55%, transparent);
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: ui-scroll-progress linear;
    animation-timeline: scroll(root);
  }
  @keyframes ui-scroll-progress { to { transform: scaleX(1); } }
}

/* ===== حركة محترمة ===== */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== إعدادات العرض (Popover) ===== */
.settings-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border-radius: 12px; color: var(--ui-muted);
  border: 1px solid var(--ui-line); background: color-mix(in srgb, var(--ui-panel-2) 80%, transparent);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.settings-btn:hover { color: var(--ui-text); border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-line)); }
.settings-btn.active {
  color: var(--accent-ink, #03200f);
  border-color: transparent;
  background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 70%, #0d9488));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ui-accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
}
.settings-pop {
  position: fixed; inset-block-start: 70px; inset-inline-end: 16px;
  width: min(320px, 92vw); margin: 0; padding: 14px; z-index: 130;
  border: 1px solid var(--ui-line); border-radius: 18px;
  background: color-mix(in srgb, var(--ui-panel) 94%, transparent);
  color: var(--ui-text); box-shadow: 0 24px 70px rgba(0,0,0,.55);
  backdrop-filter: blur(18px) saturate(1.15);
}
.settings-pop::backdrop { background: rgba(3,6,12,.48); backdrop-filter: blur(4px); }
.settings-pop.sp-open { display: block; }
.settings-pop:popover-open { animation: ui-pop-in .22s var(--ease); }
@starting-style { .settings-pop:popover-open { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes ui-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.sp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sp-head b { font-family: var(--font-display); font-size: 14px; }
.sp-close { width: 30px; height: 30px; border-radius: 9px; color: var(--ui-muted); font-size: 18px; line-height: 1; }
.sp-close:hover { background: rgba(255,255,255,.08); color: #fff; }
.sp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 4px; border-block-start: 1px solid color-mix(in srgb, var(--ui-line) 70%, transparent);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.sp-row input { accent-color: var(--ui-accent); width: 38px; height: 22px; cursor: pointer; }
.sp-note { margin-block-start: 10px; color: var(--ui-faint); font-size: 10.5px; font-weight: 600; }
@supports not selector(:popover-open) {
  .settings-pop { display: none; }
  .settings-pop.sp-open { display: block; }
}

/* ===== الشريط المصغّر ===== */
.mini-bar {
  position: fixed; inset-block-end: calc(18px + var(--ui-safe-b)); left: 50%;
  transform: translateX(-50%) translateY(22px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  max-width: calc(100vw - 24px); z-index: 110;
  border: 1px solid var(--ui-line); border-radius: 16px;
  background: color-mix(in srgb, var(--ui-panel) 90%, transparent);
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  backdrop-filter: blur(16px) saturate(1.2);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mini-bar.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mi-avatar {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 45%, #1b2a4a));
}
.mi-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mi-txt b { font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mi-txt small { display: inline-flex; align-items: center; gap: 5px; color: var(--ui-muted); font-size: 10px; font-weight: 700; }
.mi-live { width: 6px; height: 6px; border-radius: 50%; background: #ff5c6c; box-shadow: 0 0 8px rgba(255,92,108,.85); animation: ui-pulse 1.2s infinite; }
.mi-back {
  margin-inline-start: auto; padding: 8px 12px; border-radius: 10px; white-space: nowrap;
  font-size: 11.5px; font-weight: 800; color: #04120a; background: var(--ui-accent);
}
.mi-back:hover { filter: brightness(1.08); }
@keyframes ui-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ===== انتقالات الصفحة ===== */
::view-transition-group(playerHead) { animation-duration: .35s; animation-timing-function: var(--ease); }
::view-transition-old(playerHead), ::view-transition-new(playerHead) { mix-blend-mode: normal; }

@media (max-width: 520px) {
  .mini-bar { inset-block-end: calc(10px + var(--ui-safe-b)); padding: 6px 8px; gap: 8px; }
  .mi-avatar { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; }
  .mi-back { padding: 7px 10px; font-size: 10.5px; }
  .settings-pop { inset-block-start: 64px; inset-inline-end: 10px; }
}