<?php require_once __DIR__ . '/feature-flags.php'; ?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="theme-color" content="#050D17">
  <title><?= $pageTitle ?? 'EL3AB' ?></title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/public/css/app.css">
  <?php if (isset($extraCss)): ?>
  <?php if (is_array($extraCss)): ?>
  <?php foreach ($extraCss as $css): ?>
  <link rel="stylesheet" href="<?= $css ?>">
  <?php endforeach; ?>
  <?php else: ?>
  <link rel="stylesheet" href="<?= $extraCss ?>">
  <?php endif; ?>
  <?php endif; ?>
  <?php require_once __DIR__ . '/theme-loader.php'; ?>
</head>
<body>
<div class="app">

  <?php require __DIR__ . '/../templates/nav-desktop.php'; ?>

  <header class="header">
    <div class="header-inner">
      <a href="/" class="header-logo">EL3AB</a>
      <div class="header-stats">
        <div class="header-stat">
          <svg class="icon-sm icon-fill" style="color:var(--gold)"><use href="/public/icons/sprite.svg#icon-coin"></use></svg>
          <span id="header-coins">0</span>
        </div>
        <div class="header-stat">
          <svg class="icon-sm icon-fill" style="color:var(--purple)"><use href="/public/icons/sprite.svg#icon-gem"></use></svg>
          <span id="header-gems">0</span>
        </div>
        <a href="/notifications" class="header-bell">
          <svg class="icon"><use href="/public/icons/sprite.svg#icon-bell"></use></svg>
          <span class="header-badge" id="header-notif-badge" style="display:none">0</span>
        </a>
      </div>
    </div>
  </header>

  <main class="main">
    <div class="main-inner">
