/* RAKAN · the ONE site header (owner 2026-10-28: "make the header consistent with all pages, not many changes so I don't get confused").
   Every page has the same markup: <header class="top" id="top"> · .brand · nav.links (a.opt … · a.lang-sw · a.x-btn · a.hdr-cta) and loads this
   file LAST, so the header looks the same on pages built on styles.css and on the pages with their own stylesheet (leaderboard, trending, links).
   Every rule starts with #top, so nothing here touches the rest of a page and no page rule reaches the header.
   Logo colour per page stays: gold on the leaderboard (body.lba), violet on trending (body.trx), blue elsewhere. */

#top {
  --hd-line: rgba(120, 170, 230, 0.14);
  --hd-line2: rgba(120, 170, 230, 0.26);
  --hd-text: #c9d4e3;
  --hd-white: #f3f7fc;
  --hd-cyan: #22c3ff;
  --hd-grad: linear-gradient(100deg, #0a84ff 0%, #22c3ff 100%);
  --hd-body: "Inter", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --hd-ar: "IBM Plex Sans Arabic", "Inter", "Segoe UI", Tahoma, system-ui, sans-serif;
  --hd-display: "Space Grotesk", "Sora", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --hd-ease: cubic-bezier(.2, .8, .2, 1);
  --hd-h: 64px;
  --hc: 38px;
  --hd-r: 16px; /* the header's own rem: 16 px, 15 px on phones (= styles.css html 93.75%), the same on every page */
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; box-sizing: content-box;
  height: var(--hd-h); margin: 0; padding: env(safe-area-inset-top, 0px) 0 0;
  background: transparent; border: 0; border-bottom: 1px solid transparent; box-shadow: none;
  font: 400 16px/1.65 var(--hd-body); color: var(--hd-text); letter-spacing: normal; text-align: start;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
}
#top.is-stuck { background: rgba(1, 10, 21, 0.78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--hd-line); }
#top *, #top *::before, #top *::after { box-sizing: border-box; letter-spacing: inherit; }
#top img, #top svg { display: block; max-width: 100%; }
#top a { text-decoration: none; }
#top a:focus-visible, #top button:focus-visible { outline: 2px solid var(--hd-cyan); outline-offset: 3px; }

#top > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; max-width: 1160px; margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }

/* logo: falcon + RAKAN word, always left-to-right */
#top .brand { display: inline-flex; align-items: center; gap: 10px; flex: none; direction: ltr; color: var(--hd-white); white-space: nowrap; }
#top .brand img:first-child { width: 36px; height: 36px; filter: drop-shadow(0 0 10px rgba(34, 195, 255, 0.35)); transition: transform .4s var(--hd-ease); }
#top .brand:hover img:first-child { transform: rotate(-8deg) scale(1.06); }
#top .brand img.brand-word { width: auto; height: 20px; filter: none; transform: none; }
body.lba #top .brand img:first-child { filter: grayscale(1) brightness(.8) sepia(1) saturate(3) hue-rotate(-4deg) brightness(1.28) contrast(1.05) drop-shadow(0 3px 12px rgba(255, 180, 70, .35)); }
body.lba #top .brand img.brand-word { filter: grayscale(1) brightness(.78) sepia(1) saturate(3.2) hue-rotate(-4deg) brightness(1.32) contrast(1.05); }
body.trx #top .brand img:first-child { filter: grayscale(1) brightness(.8) sepia(1) saturate(4.2) hue-rotate(238deg) brightness(1.3) contrast(1.05) drop-shadow(0 3px 12px rgba(190, 80, 255, .4)); }
body.trx #top .brand img.brand-word { filter: grayscale(1) brightness(.78) sepia(1) saturate(4.4) hue-rotate(238deg) brightness(1.4) contrast(1.05); }
body.shx #top .brand img:first-child { filter: grayscale(1) brightness(.8) sepia(1) saturate(3.6) hue-rotate(78deg) brightness(1.25) contrast(1.05) drop-shadow(0 3px 12px rgba(52, 211, 120, .38)); }
body.shx #top .brand img.brand-word { filter: grayscale(1) brightness(.78) sepia(1) saturate(3.8) hue-rotate(78deg) brightness(1.35) contrast(1.05); } /* green on shouts (owner 2026-10-29) */

/* links */
#top nav.links { display: flex; align-items: center; gap: 14px; min-width: 0; margin: 0; padding: 0; background: none; }
#top nav.links a.opt { position: relative; display: inline; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; height: auto;
  color: #b9c6d8; font: 500 calc(.88 * var(--hd-r))/1 var(--hd-body); letter-spacing: .01em; white-space: nowrap; }
#top nav.links a.opt { min-height: 0; width: auto; gap: 0; border-radius: 0; text-align: start; cursor: pointer; transform: none; transition: color .2s; } /* account.css has its own .opt (plan buttons) */
#top nav.links a.opt:hover { transform: none; border-color: transparent; }
#top nav.links a.opt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--hd-grad); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--hd-ease); }
#top nav.links a.opt:hover, #top nav.links a.opt.is-active { color: var(--hd-white); }
#top nav.links a.opt:hover::after, #top nav.links a.opt.is-active::after { transform: scaleX(1); }
#top nav.links a.opt.lb-link { color: #ffcf6e; }
#top nav.links a.opt.lb-link::after { background: linear-gradient(90deg, #ffcf6e, #ff9a3d); }

/* language switch · X · Open the bot: one height, one radius */
#top nav.links a.lang-sw { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--hc); margin: 0 0 0 0; margin-inline-start: 4px;
  padding: 0 12px; border-radius: 10px; border: 1px solid var(--hd-line); background: rgba(255, 255, 255, 0.04); box-shadow: none;
  color: var(--hd-text); font: 600 calc(.82 * var(--hd-r))/1 "Inter", system-ui, sans-serif; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
#top nav.links a.lang-sw[lang="ar"] { font-family: var(--hd-ar); font-size: calc(.88 * var(--hd-r)); }
#top nav.links a.lang-sw:hover, #top nav.links a.lang-sw:focus-visible { color: var(--hd-white); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); }
#top nav.links a.lang-sw::before { content: ""; position: absolute; inset-inline-start: -9px; top: 50%; width: 1px; height: 22px; transform: translateY(-50%); background: var(--hd-line2); }
#top nav.links a.lang-sw .lang-flag { flex: none; width: 18px; height: 12px; margin: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
#top nav.links a.x-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--hc); height: var(--hc); margin: 0; margin-inline-start: 4px; padding: 0;
  border-radius: 10px; color: #fff; border: 1px solid var(--hd-line); background: rgba(255, 255, 255, 0.04); transition: background .2s, border-color .2s, transform .2s; }
#top nav.links a.x-btn .x-ico { width: 16px; height: 16px; fill: currentColor; }
#top nav.links a.x-btn:hover, #top nav.links a.x-btn:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-1px); }
#top nav.links a.hdr-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 10px; height: var(--hc); margin: 0; padding: 0 18px;
  border: 0; border-radius: 10px; overflow: hidden; color: #fff; background: var(--hd-grad); font: 600 calc(.86 * var(--hd-r))/1 var(--hd-display); letter-spacing: .01em; white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 30px -8px rgba(10, 132, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform .25s var(--hd-ease), box-shadow .25s; filter: none; }
#top nav.links a.hdr-cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(34, 195, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* signed in (nav.js): [person] My account [plan pill] */
#top nav.links a.opt.is-signed { display: inline-flex; align-items: center; gap: 8px; height: var(--hc); padding-block: 0; padding-inline: 11px 5px; border-radius: 999px;
  border: 1px solid var(--hd-line2); background: rgba(255, 255, 255, .035); color: #fff; font-weight: 600; font-size: calc(.86 * var(--hd-r)); transition: background .2s, border-color .2s; }
#top nav.links a.opt.is-signed::after { display: none; }
#top nav.links a.opt.is-signed:hover { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .28); }
#top .acct-ico { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; color: #9fb2c7; }
#top .acct-pill { display: inline-block; margin: 0; padding: 3px 8px; border-radius: 999px; font: 600 calc(.68 * var(--hd-r))/1.2 var(--hd-body); letter-spacing: .03em; white-space: nowrap;
  color: #c9d3df; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
#top .acct-pill.k-owner { color: #2b1b02; background: linear-gradient(180deg, #ffe9ad, #e6ad48); box-shadow: inset 0 0 0 1px rgba(255, 244, 214, .55), 0 0 14px -4px rgba(240, 180, 70, .55); }
#top .acct-pill.k-paid { color: #d9e8ff; background: rgba(47, 123, 255, .2); box-shadow: inset 0 0 0 1px rgba(96, 155, 255, .55); }
#top .acct-pill.k-tester { color: #bdf4ec; background: rgba(45, 212, 191, .14); box-shadow: inset 0 0 0 1px rgba(45, 212, 191, .45); }

/* ☰ phone menu (nav.js builds it from the a.opt links) */
#top .menu-btn { display: none; }
#top .m-menu[hidden] { display: none !important; }

/* Arabic */
html[dir="rtl"] #top nav.links a.opt { font-family: var(--hd-ar); font-size: calc(.95 * var(--hd-r)); letter-spacing: 0; }
html[dir="rtl"] #top nav.links a.opt::after { transform-origin: right; }
html[dir="rtl"] #top .acct-pill { letter-spacing: 0; font-family: var(--hd-ar); }

@media (max-width: 1240px) {
  #top nav.links { gap: 18px; }
  #top nav.links a.opt, #top nav.links a.opt.is-signed { display: none; }
  #top .menu-btn { display: inline-grid; place-content: center; gap: 4px; width: 42px; height: 40px; flex: none; margin: 0; padding: 0; border-radius: 12px; cursor: pointer;
    background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hd-line); }
  #top .menu-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: #e6eef8; transition: transform .2s, opacity .2s; }
  #top .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  #top .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  #top .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  #top .m-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
    background: rgba(4, 12, 24, 0.98); border-bottom: 1px solid var(--hd-line); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6); max-height: calc(100svh - 70px); overflow-y: auto; }
  #top .m-menu nav, #top .m-menu .m-row { max-width: 560px; margin-inline: auto; }
  #top .m-menu nav { display: grid; }
  #top .m-menu nav a { display: block; padding: 14px 6px; color: #e6eef8; font: 600 calc(1.02 * var(--hd-r))/1.2 var(--hd-body); border-bottom: 1px solid rgba(150, 185, 230, 0.10); }
  html[dir="rtl"] #top .m-menu nav a { font-family: var(--hd-ar); }
  #top .m-menu nav a:active { background: rgba(255, 255, 255, 0.04); }
  #top .m-menu a.m-signin { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 8px; padding: 13px 14px; border: 1px solid rgba(34, 195, 255, 0.45); border-radius: 12px; background: rgba(34, 195, 255, 0.08); color: #fff; text-align: center; }
  #top .m-menu .m-row { display: flex; gap: 10px; margin-top: 14px; }
  #top .m-menu .m-row a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; text-align: center; padding: 12px 10px; border-radius: 12px;
    border: 1px solid var(--hd-line); color: #dce8f6; font: 600 calc(.95 * var(--hd-r))/1.2 var(--hd-body); background: rgba(255, 255, 255, 0.03); }
  #top .m-menu .m-row a[lang="ar"] { font-family: var(--hd-ar); }
  #top .m-menu .m-row a .x-ico { display: inline-block; width: 17px; height: 17px; flex: none; fill: currentColor; }
  #top .m-menu .m-flag { flex: none; width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
  html.m-open { overflow: hidden; }
}
@media (max-width: 1080px) { #top nav.links a.lang-sw::before { display: none; } }
@media (max-width: 900px) {
  #top > .wrap { gap: 10px; }
  #top nav.links { gap: 8px; }
  #top nav.links a.lang-sw, #top nav.links a.x-btn { display: none; }
}
@media (max-width: 640px) { #top { --hd-r: 15px; } #top .brand { gap: 8px; } #top .brand img:first-child { width: 30px; height: 30px; } }
@media (max-width: 560px) { #top { --hc: 36px; } #top nav.links a.hdr-cta { padding: 0 13px; font-size: calc(.8 * var(--hd-r)); } }
@media (max-width: 420px) { #top .brand { gap: 6px; } #top .brand img.brand-word { height: 15px; } #top > .wrap { padding-left: 12px; padding-right: 12px; } }
@media (max-width: 400px) { #top { --hc: 34px; } #top nav.links a.hdr-cta { padding: 0 11px; } }
@media (max-width: 330px) { #top .brand img.brand-word { display: none; } }

/* back-to-top arrow (nav.js) — same as styles.css, for the pages that do not load styles.css */
.to-top { position: fixed; z-index: 60; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, #0a84ff, #22c3ff); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 12px 30px -10px rgba(10, 132, 255, 0.7);
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .25s, transform .25s; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-2px); } .to-top:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.to-top svg { display: block; width: 22px; height: 22px; }
html[dir="rtl"] .to-top { right: auto; left: max(18px, env(safe-area-inset-left, 0px)); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
/* owner 2026-10-28: each section link in its own page colour — Leaderboard gold, Trending violet (header + phone menu) */
#top nav.links a.opt[href^="/leaderboard"], .m-menu a[href^="/leaderboard"] { color: #ffcf6e; }
#top nav.links a.opt[href^="/leaderboard"]::after { background: linear-gradient(90deg, #ffe08a, #f5a524); }
#top nav.links a.opt[href^="/trending"], .m-menu a[href^="/trending"] { color: #d58cff; }
#top nav.links a.opt[href^="/trending"]::after { background: linear-gradient(90deg, #b45cff, #ff4fd8); }
#top nav.links a.opt[href^="/leaderboard"]:hover, #top nav.links a.opt[href^="/leaderboard"].is-active { color: #ffe08a; }
#top nav.links a.opt[href^="/trending"]:hover, #top nav.links a.opt[href^="/trending"].is-active { color: #e9b8ff; }
/* owner 2026-10-28: clearer flags (bigger, crisp edge) — Saudi beside العربية, UK beside English */
#top nav.links a.lang-sw .lang-flag, .m-menu .lang-flag, .m-flag { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35), 0 1px 4px rgba(0, 0, 0, .45); }
#top nav.links a.lang-sw { gap: 8px; }
/* owner 2026-10-28: the phone menu keeps the page colours too — Leaderboard gold, Trending violet */
#top .m-menu nav a[href^="/leaderboard"] { color: #ffcf6e; }
#top .m-menu nav a[href^="/trending"] { color: #d58cff; }
/* owner 2026-10-28: "RAKAN has no token" — one amber line above the copyright on every page (sitefoot.js, leaderboard, links, trending, 404, docs) */
.no-token { margin: 0; padding: 10px 14px; border: 1px solid rgba(255, 196, 61, .3); border-radius: 12px; background: rgba(255, 196, 61, .06); color: #ffd27a; font-size: .84rem; font-weight: 500; line-height: 1.55; text-align: start; overflow-wrap: anywhere; }
footer.foot .wrap.foot-note { margin-top: 40px; }
footer.foot .wrap.foot-note + .wrap.foot-bottom { margin-top: 16px; }
.lbf .no-token { max-width: 1140px; margin: 18px auto 0; width: calc(100% - 32px); box-sizing: border-box; }
.lk-foot .no-token { margin: 6px auto 2px; max-width: 520px; text-align: center; }
.tr-no-token { max-width: 1260px; margin: 20px auto 64px; width: calc(100% - 32px); box-sizing: border-box; }
.nf-in .no-token { text-align: center; }
/* owner 2026-10-28: on phones the floating Support button (bottom-left) and the back-to-top arrow (bottom-right) must not cover the last footer lines */
@media (max-width: 640px) {
  footer.foot .wrap.foot-note { margin-top: 32px; }
  footer.foot .wrap.foot-bottom, footer.foot .wrap.foot-note + .wrap.foot-bottom { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .lbf .in, .lba .lbf .in { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .lk-foot { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .nf { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}
/* owner 2026-10-29: Shouts = emerald → lime (its own page colour), with a NEW / جديد badge in the header and the phone menu */
#top nav.links a.opt[href^="/shouts"], .m-menu a[href^="/shouts"], #top .m-menu nav a[href^="/shouts"] { color: #6ee7b7; }
#top nav.links a.opt[href^="/shouts"]::after { background: linear-gradient(90deg, #10b981, #a3e635); }
#top nav.links a.opt[href^="/shouts"]:hover, #top nav.links a.opt[href^="/shouts"].is-active { color: #bef264; }
.nav-new { display: inline-block; margin-inline-start: 6px; padding: 2px 6px; border-radius: 999px; font: 800 .6rem/1.35 'JetBrains Mono', 'IBM Plex Sans Arabic', monospace; letter-spacing: .06em; color: #04140d; background: linear-gradient(120deg, #10b981, #a3e635); vertical-align: 2px; box-shadow: 0 0 12px rgba(163, 230, 53, .35); }
.sh-no-token { max-width: 1180px; margin: 22px auto 0; width: calc(100% - 32px); box-sizing: border-box; position: relative; z-index: 1; }