/* Közös fejléc és lábléc a *.molnargabor.hu aldomainekhez (games, learn).
   A fájl mindkét repóban szó szerint ugyanaz – módosításkor a másikba is másold át.
   Az oldal saját színeit a :root-ban megadott --mg-* változók hozzák:
   --mg-accent, --mg-accent-ink (szöveg az accent színen), --mg-ink, --mg-muted, --mg-line, --mg-surface. */
@font-face{font-family:'mg-display';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'mg-display';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(fonts/archivo-latin-wdth-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'mg-mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jetbrains-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'mg-mono';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

.mg-bar,.mg-foot{
  --mg-f-display:'mg-display','Arial Narrow',system-ui,sans-serif;
  --mg-f-mono:'mg-mono',ui-monospace,Menlo,Consolas,monospace;
  --_accent:var(--mg-accent,#43D1B4); --_accent-ink:var(--mg-accent-ink,#04110D);
  --_ink:var(--mg-ink,#E9F0EC); --_muted:var(--mg-muted,#8FA19A);
  --_line:var(--mg-line,rgba(233,240,236,.18)); --_surface:var(--mg-surface,rgba(7,11,10,.4));
}
.mg-bar a,.mg-foot a{color:inherit;text-decoration:none}
.mg-bar a:focus-visible,.mg-foot a:focus-visible{outline:2px solid var(--_accent);outline-offset:3px;border-radius:8px}

/* Fejléc: logó + aldomain-váltó */
.mg-bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.mg-brand{display:flex;align-items:center;gap:10px;min-width:0;color:var(--_ink)}
.mg-mark{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--_accent),color-mix(in srgb,var(--_accent) 40%,#000));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 8px 24px -8px var(--_accent)}
.mg-mark svg{width:20px;height:20px;fill:none;stroke:var(--_accent-ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.mg-mark svg circle{fill:var(--_accent-ink);stroke:none}
.mg-word{font:500 16px/1 var(--mg-f-display);font-stretch:110%;letter-spacing:-.01em;color:var(--_muted);white-space:nowrap}
.mg-word b{font-weight:700;color:var(--_ink)}
.mg-sites{display:flex;gap:2px;padding:4px;border:1px solid var(--_line);border-radius:999px;background:var(--_surface);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.mg-sites a{font:13px/1 var(--mg-f-mono);color:var(--_muted);padding:8px 14px;border-radius:999px;transition:color .2s,background .2s}
.mg-sites a:hover{color:var(--_ink)}
.mg-sites a[aria-current]{background:var(--_accent);color:var(--_accent-ink)}

/* Lábléc */
.mg-foot{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--_line);
  font:12.5px/1.5 var(--mg-f-mono);color:var(--_muted)}
.mg-foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.mg-foot-links a{color:var(--_ink);transition:color .2s}
.mg-foot-links a:hover,.mg-foot-links a[aria-current]{color:var(--_accent)}

@media (max-width:480px){
  .mg-word span{display:none}
  .mg-sites a{padding:8px 11px}
  .mg-foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.mg-sites a,.mg-foot-links a{transition:none}}