/* 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}}
/* 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}}