:root{
        --bg:#0b0d12; --brand:#0b5cff; --glass:rgba(255,255,255,.10); --stroke:rgba(255,255,255,.16);
        --text:#ffffff; --muted:#cfd3db; --radius:22px;

        /* ألوان أعلام تقريبية */
        --ae-red:#d80027; --ae-green:#007a3d; --ae-black:#000;
        --sa-green:#006c35;
        --kw-green:#009e60; --kw-red:#ce1126; --kw-black:#000;
        --qa-maroon:#8a1538; /* قطر */
        --bh-red:#e30b17;     /* البحرين */
        --om-red:#d21034; --om-green:#007a3d;
      }

      *{box-sizing:border-box}
      html,body{height:100%}
      body{
        margin:0; color:var(--text);
        background:
          radial-gradient(1200px 600px at 80% -10%, #1a2542 0%, transparent 60%),
          radial-gradient(1000px 500px at 0% 100%, #213354 0%, transparent 60%),
          var(--bg);
        font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Naskh Arabic",Tahoma,Arial,sans-serif;
      }

      header,footer{max-width:1200px;margin-inline:auto;padding:18px}
      header h1{margin:6px 0 4px;font-size:clamp(20px,3.2vw,36px)}
      header p{margin:0;color:var(--muted);font-size:clamp(13px,2vw,16px)}

      .grid{
        min-height:calc(100vh - 160px);
        display:grid; gap:16px; padding:16px;
        grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
        max-width:1200px; margin-inline:auto;
      }

      /* البطاقة = رابط بالكامل */
      .card{
        position:relative; display:block; border-radius:var(--radius);
        overflow:hidden; isolation:isolate; text-decoration:none; color:#fff;
        background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.04));
        border:1px solid var(--stroke);
        box-shadow:0 8px 24px rgba(0,0,0,.25);
        transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      }
      .card:hover{ transform:translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.35); border-color:rgba(255,255,255,.22) }

      /* مساحة الخلفية المولّدة */
      .flag{
        position:relative; height:220px;
      }
      /* طبقة لمعان خفيفة */
      .flag::after{
        content:""; position:absolute; inset:0;
        background:radial-gradient(600px 300px at 50% -10%, rgba(255,255,255,.18), transparent 60%),
                   radial-gradient(500px 260px at 50% 110%, rgba(255,255,255,.10), transparent 60%);
        pointer-events:none;
      }

      .content{padding:14px 16px 18px}
      .content h2{margin:0 0 10px; font-size:18px}
      .cta{
        display:inline-flex; align-items:center; gap:8px;
        padding:10px 14px; border-radius:14px; font-weight:700; font-size:14px;
        background:linear-gradient(90deg, var(--brand), #6f6cf6);
        color:#fff; box-shadow:0 6px 18px rgba(11,92,255,.35);
      }
      .cta svg{width:16px;height:16px}

      .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
      footer{color:var(--muted);font-size:13px}
      footer a{color:inherit}

      /* ====== خلفيات الأعلام عبر CSS فقط ====== */

      /* الإمارات: شريط عمودي أحمر + ثلاث أشرطة أفقية أخضر/أبيض/أسود */
      .bg-ae{
        background:
          linear-gradient(to bottom, var(--ae-green) 0 33.333%, #fff 33.333% 66.666%, var(--ae-black) 66.666% 100%) right / 75% 100%,
          linear-gradient(to right, var(--ae-red) 0 25%, transparent 25% 100%) left / 100% 100%;
        background-repeat:no-repeat;
      }

      /* السعودية: أخضر موحّد بتدرّج أنيق */
      .bg-sa{
        background:
          radial-gradient(100% 200% at 30% 0%, rgba(255,255,255,.10), transparent 60%),
          linear-gradient(180deg, #0a7f43, var(--sa-green));
      }

      /* الكويت: أفقياً (أخضر/أبيض/أحمر) + شبه منحرف أسود على اليسار */
      .bg-kw{
        background:
          linear-gradient(to bottom, var(--kw-green) 0 33.333%, #fff 33.333% 66.666%, var(--kw-red) 66.666% 100%);
      }
      .bg-kw::before{
        content:""; position:absolute; inset:0;
        background:var(--kw-black);
        clip-path:polygon(0 0, 28% 0, 20% 50%, 28% 100%, 0 100%);
      }

      /* قطر: خمري مع فاصل مسنن أبيض */
      .bg-qa{
        background:var(--qa-maroon);
      }
      .bg-qa::before{
        content:""; position:absolute; inset:0 55% 0 0; background:#fff;
        /* حافة مسننة */
        clip-path:polygon(
          0 0, 72% 0,
          78% 6%, 84% 0, 90% 6%, 96% 0,
          100% 6%, 100% 94%,
          96% 100%, 90% 94%, 84% 100%, 78% 94%, 72% 100%,
          0 100%
        );
      }

      /* البحرين: أحمر مع فاصل مسنن أبيض */
      .bg-bh{
        background:var(--bh-red);
      }
      .bg-bh::before{
        content:""; position:absolute; inset:0 60% 0 0; background:#fff;
        clip-path:polygon(
          0 0, 70% 0,
          76% 6%, 82% 0, 88% 6%, 94% 0,
          100% 6%, 100% 94%,
          94% 100%, 88% 94%, 82% 100%, 76% 94%, 70% 100%,
          0 100%
        );
      }

      /* عُمان: شريط عمودي أحمر + أفقياً (أبيض/أحمر/أخضر) */
      .bg-om{
        background:
          linear-gradient(to bottom, #fff 0 33.333%, var(--om-red) 33.333% 66.666%, var(--om-green) 66.666% 100%) right / 75% 100%,
          linear-gradient(to right, var(--om-red) 0 25%, transparent 25% 100%) left / 100% 100%;
        background-repeat:no-repeat;
      }