@font-face{font-family:"HPLogo";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/hp-logo-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F}
/* shared site header (#hpTop, built by topbar.js) — used by engine pages and by the game wrapper */
#hpTop{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
#hpTop .hin{width:min(100% - 2*clamp(16px,4vw,56px),1440px);margin-inline:auto;min-height:72px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:8px}
#hpTop .hlogo{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-display,var(--fh));font-weight:800;font-size:1.55rem;color:var(--ink);text-decoration:none}
#hpTop .hlogo i{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--v),var(--v-2));display:grid;place-items:center}
#hpTop .hlogo i::before{content:"";border-inline-start:13px solid #fff;border-block:8px solid transparent;margin-inline-start:4px}
html[dir=rtl] #hpTop .hlogo i::before{transform:scaleX(-1)}
#hpTop nav{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
#hpTop nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-sm);font-weight:700;color:var(--muted);text-decoration:none}
#hpTop nav a:hover{color:var(--ink);background:var(--surface)}
#hpTop nav a.on{color:var(--v);background:var(--v-soft)}
#hpTop .hlg{display:inline-flex;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px}
#hpTop .hlg button{border:0;background:none;min-height:36px;padding:0 14px;border-radius:999px;font-weight:700;font-size:.92rem}
#hpTop .hlg button.on{background:var(--ink);color:#fff}
#hpTop nav a{white-space:nowrap}
@media (max-width:1440px){#hpTop .hin{gap:12px}#hpTop nav{gap:2px}#hpTop nav a{padding:0 8px;font-size:.96rem}}
/* below 1240px the links get their own row instead of wrapping unevenly */
@media (max-width:1239px){#hpTop nav{order:3;flex-basis:100%;justify-content:center;overflow-x:auto;flex-wrap:nowrap}#hpTop .hlogo{flex:1}}
@media (max-width:860px){#hpTop nav{justify-content:flex-start}}
@media (max-width:560px){#hpTop .hin{gap:8px}#hpTop .hlogo{font-size:1.15rem;gap:8px;min-width:0}#hpTop .hlogo i{width:38px;height:38px;flex:none}#hpTop .hlg button{padding:0 10px;font-size:.88rem}}
/* eight tabs: keep the header on one line */
#hpTop .hin{flex-wrap:nowrap;gap:10px}#hpTop nav{display:flex;flex:1 1 auto;min-width:0;justify-content:center;gap:0}
#hpTop nav a{padding:0 9px;font-size:.95rem}#hpTop .hlogo{flex:none;white-space:nowrap}#hpTop .hlg,#hpTop .hps,#hpTop .hpbell{flex:none}
@media (max-width:1600px){#hpTop nav a{padding:0 7px;font-size:.9rem}}
@media (max-width:1320px){#hpTop nav a{padding:0 5px;font-size:.82rem}#hpTop .hlogo{font-size:1.25rem}#hpTop .hlg button{padding:0 9px;font-size:.85rem}}
@media (max-width:1100px){#hpTop .hin{flex-wrap:wrap}}

/* the Arabic word mark uses a face whose lam-alef is open, so it reads "بلاي" and never "بلدي" */
#hpTop .hlogo{font-family:"HPLogo","Alexandria",var(--f-display,var(--fh))}


/* the top bar: four big links, "Create activity" stands out */
.nav a,#hpTop nav a{font-size:1.12rem!important;font-weight:800!important;padding-inline:16px!important;min-height:46px;border-radius:14px!important}
.nav a[href$="create.html"],#hpTop nav a[href$="create.html"]{background:linear-gradient(135deg,#6947E8,#9B6BFF)!important;color:#fff!important;border-radius:999px!important;box-shadow:0 10px 22px -10px rgba(105,71,232,.75);padding-inline:20px!important;margin-inline-end:8px}
.nav a[href$="create.html"]::before,#hpTop nav a[href$="create.html"]::before{content:"✨";margin-inline-end:6px}
.nav a[href$="create.html"]:hover,#hpTop nav a[href$="create.html"]:hover{filter:brightness(1.08);transform:translateY(-1px)}
.nav a[href$="create.html"] svg{display:none}
/* an icon before every tab, like the sparkle of "Create activity" */
.nav a svg{display:none!important}
.nav a[href*="tasis"]::before,#hpTop nav a[href*="tasis"]::before{content:"🔤";margin-inline-end:6px}
.nav a[href$="#games"]::before,#hpTop nav a[href$="#games"]::before{content:"🎮";margin-inline-end:6px}
.nav a[href$="tests.html"]::before,#hpTop nav a[href$="tests.html"]::before{content:"📝";margin-inline-end:6px}
.nav a[href$="curricula.html"]::before,#hpTop nav a[href$="curricula.html"]::before{content:"📚";margin-inline-end:6px}

/* five tabs with icons stay on one line */
#hpTop nav,.top .nav{flex-wrap:nowrap!important}
@media (max-width:1500px){.nav a,#hpTop nav a{font-size:1rem!important;padding-inline:11px!important}.nav a[href$="create.html"],#hpTop nav a[href$="create.html"]{padding-inline:14px!important}}
/* small lessons search in every header (markup: HP.searchHtml in shared.js). Appended to site.css and top.css by build.py.
   Wide screens: a compact field. Narrow screens: an icon that opens the field across the whole header row. */
.hps{display:flex;align-items:center;gap:8px;flex:none;margin:0}
.hps svg{width:20px;height:20px;fill:none;stroke:var(--muted,#52658D);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.hps-f{display:flex;align-items:center;gap:8px;height:44px;width:clamp(170px,14vw,230px);padding:0 14px;border:1px solid var(--line,#E3E7F2);border-radius:999px;background:var(--surface,#fff);cursor:text;transition:border-color .18s}
.hps-f:focus-within{border-color:var(--v,#6947E8)}
.hps input{flex:1;min-width:0;width:100%;border:0;outline:0;background:none;font:inherit;font-family:var(--f,inherit);font-size:.95rem;font-weight:500;color:var(--ink,#182344);padding:0;margin:0;height:100%;-webkit-appearance:none;appearance:none}
.hps input::placeholder{color:var(--muted,#52658D);opacity:1}
.hps input::-webkit-search-cancel-button{display:none}
.hps-o,.hps-x{display:none;width:44px;height:44px;flex:none;border-radius:var(--r-sm,12px);border:1px solid var(--line,#E3E7F2);background:var(--surface,#fff);place-items:center;padding:0;cursor:pointer}
.hps-o svg,.hps-x svg{stroke:var(--ink,#182344)}
.hps-go{display:none;flex:none;height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--v,#6947E8);color:#fff;font:inherit;font-family:var(--fh,inherit);font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap}
/* collapsed: below 1560px the nav links, language switch and account leave no room for the field */
@media (max-width:1559px){
  .top .hps-o{display:grid}.top .hps-f{display:none}
  .top .hps.open{position:absolute;inset:0;z-index:6;background:var(--bg,#F2F4FC);padding-inline:clamp(16px,4vw,56px)}
  .top .hps.open .hps-o{display:none}.top .hps.open .hps-f{display:flex;flex:1;width:auto;min-width:0}
  .top .hps.open .hps-x{display:grid}.top .hps.open .hps-go{display:block}
}
@media (max-width:1559px){
  #hpTop .hps-o{display:grid}#hpTop .hps-f{display:none}
  #hpTop .hps.open{position:absolute;inset:0;z-index:6;background:var(--bg,#F2F4FC);padding-inline:clamp(16px,4vw,56px)}
  #hpTop .hps.open .hps-o{display:none}#hpTop .hps.open .hps-f{display:flex;flex:1;width:auto;min-width:0}
  #hpTop .hps.open .hps-x{display:grid}#hpTop .hps.open .hps-go{display:block}
}
@media (max-width:420px){.hps.open .hps-go{padding:0 12px}}

/* six menu items (Hessa Slides added): a little tighter, and only «إنشاء نشاط» keeps its small icon, so the menu never runs under the search box */
.nav a,#hpTop nav a{padding-inline:12px!important;font-size:1.05rem!important}
.nav a[href]:not([href$="create.html"])::before,#hpTop nav a[href]:not([href$="create.html"])::before{display:none!important}
@media (max-width:1600px){.nav a,#hpTop nav a{padding-inline:8px!important;font-size:.95rem!important}}
@media (max-width:1300px){.nav a,#hpTop nav a{padding-inline:6px!important;font-size:.9rem!important}}
.nav a[href$="create.html"],#hpTop nav a[href$="create.html"]{padding-inline:14px!important}
@media (max-width:1300px){.nav a[href$="create.html"],#hpTop nav a[href$="create.html"]{padding-inline:10px!important}}